小程序扫码、上传图片、css时间轴
de
<!-- 导航 --> <view class="navSec flexBox"> <text class="navItem {{ selectIndex == 1 ? 'selectedNav' : 'nothing' }}" data-index="1" bindtap="changeNav">发货扫码</text> <text class="navItem {{ selectIndex == 2 ? 'selectedNav' : 'nothing' }}" data-index="2" bindtap="changeNav">货运扫描</text> <text class="navItem {{ selectIndex == 3 ? 'selectedNav' : 'nothing' }}" data-index="3" bindtap="changeNav">货运查询</text> <text class="navItem {{ selectIndex == 4 ? 'selectedNav' : 'nothing' }}" data-index="4" bindtap="changeNav">发货查询</text> </view> <!-- 发货扫码 --> <view class="contentWrapper wrapper1 {{ selectIndex == 1 ? 'showWrapper' : 'nothing' }}"> <view class="scanContain flexBox radius10"> <label class="tipLabel">出货单号：</label> <input class="inputBox radius10" bindinput="getInputTxt1" value="{{obj1.deliveryNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/> <button class="scanBtn btnActive" data-index="1" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button> </view> <view class="imgContain radius10"> <view class="tipFile">附件<text class="tipNum">最多上传5张</text></view> <block wx:for="{{obj1.imgLst}}" wx:key="id"> <view class="imgItem radius10"> <label class="delImgBtn" data-info="1" data-index="{{index}}" bindtap="deleteImg">+</label> <image class="uploadImg" data-info="1" data-index="{{index}}" bindtap="previewImg" src="{{item}}" mode="aspectFill"></image> </view> </block> <view class="uploadImgBtn radius10" data-index="1" bindtap="uploadImg" wx:if="{{obj1.imgLst.length < 5}}"> <image class="uploadIcon" src="QHImage/iconUpload.png" mode="widthFix"></image> <text class="uploadTip">添加图片</text> </view> </view> <view class="fixFoot {{!!obj1.deliveryNo ? 'showFoot' : 'hideFoot'}}"> <button class="submitBtn btnActive" bindtap="submitPartOne">提交</button> </view> </view> <!-- 货运扫描 --> <view class="contentWrapper wrapper2 {{ selectIndex == 2 ? 'showWrapper' : 'nothing' }}"> <view class="scanContain flexBox radius10"> <label class="tipLabel">出货单号：</label> <input class="inputBox radius10" bindinput="getInputTxt2" value="{{obj2.deliveryNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/> <button class="scanBtn btnActive" data-index="2" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button> </view> <view class="scanContain flexBox radius10"> <label class="tipLabel">物流单号：</label> <input class="inputBox radius10" bindinput="getInputTxt3" value="{{obj2.logisticsNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/> <button class="scanBtn btnActive" data-index="3" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button> </view> <view class="imgContain radius10"> <view class="tipFile">附件<text class="tipNum">最多上传5张</text></view> <block wx:for="{{obj2.imgLst}}" wx:key="id"> <view class="imgItem radius10"> <label class="delImgBtn" data-info="2" data-index="{{index}}" bindtap="deleteImg">+</label> <image class="uploadImg" data-info="2" data-index="{{index}}" bindtap="previewImg" src="{{item}}" mode="aspectFill"></image> </view> </block> <view class="uploadImgBtn radius10" data-index="2" bindtap="uploadImg" wx:if="{{obj2.imgLst.length < 5}}"> <image class="uploadIcon" src="QHImage/iconUpload.png" mode="widthFix"></image> <text class="uploadTip">添加图片</text> </view> </view> <view class="fixFoot {{!!obj2.deliveryNo && !!obj2.logisticsNo ? 'showFoot' : 'hideFoot'}}"> <button class="submitBtn btnActive" bindtap="submitPartTwo">提交</button> </view> </view> <!-- 货运查询 --> <view class="contentWrapper wrapper3 {{ selectIndex == 3 ? 'showWrapper' : 'nothing' }}"> <view class="scanContain logisticsScanContain flexBox"> <label class="tipLabel">单号：</label> <input class="inputBox radius10" bindinput="getInputTxt4" value="{{obj3.logisticsNo}}" type="text" placeholder="请输入单号或扫码输入" placeholder-class="inputHolder"/> <button class="scanBtn logisticsScanBtn btnActive" data-index="4" bindtap="scanCode">扫描<image class="iconScan" src="QHImage/iconScan.png" mode="widthFix"></image></button> <button class="logisticsSearchBtn btnActive radius10" bindtap="searchLogistics">查询</button> </view> <!-- 物流详情 --> <view class="logisticsContain radius10" wx:if="{{obj3.logisticsInfo.stateArr.length > 0}}"> <view class="logisticsAddr"> <image class="iconAddr" src="QHImage/iconAddr.png" mode="aspectFill"></image> <text class="logisticsAddrTxt">收货地址：{{obj3.logisticsInfo.address}}</text> </view> <block wx:for="{{obj3.logisticsInfo.stateArr}}" wx:key="id"> <view class="logisticsItem"> <view class="logisticsTimeLeft"> <text class="logisticsTime">{{item.time}}</text> <text class="logisticsDate">{{item.date}}</text> </view> <view class="logisticsTxtRight"> <text class="logisticsState">{{item.state}}</text> <text class="logisticsTxt">{{item.stateTxt}}</text> </view> </view> </block> </view> </view> <!-- 发货查询 --> <view class="contentWrapper wrapper4 {{ selectIndex == 4 ? 'showWrapper' : 'nothing' }}"> <view class="dateFilterContain"> <text class="filterTip">查询日期</text> <view class="dateBox flexBox"> <picker class="startDate {{obj4.startDate ? 'noEmptyDate' : 'nothing'}}" end="{{obj4.endDate}}" mode="date" bindchange="startDateChange">{{obj4.startDate ? obj4.startDate : "开始时间"}}</picker> <picker class="endDate {{obj4.endDate ? 'noEmptyDate' : 'nothing'}}" start="{{obj4.startDate}}" mode="date" bindchange="endDateChange">{{obj4.endDate ? obj4.endDate : "结束时间"}}</picker> </view> <button class="shipmentSearchBtn searchBtn btnActive" bindtap="searchOrder">查询</button> </view> <view class="shipmentOrderContain" wx:if="{{obj4.orderLst.length > 0}}"> <block wx:for="{{obj4.orderLst}}" wx:key="id"> <view class="shipmentItem"> <text class="shipmentNo">出货单号:{{item.orderNo}}</text> <view class="dataRow"> <text class="customerName itemTxt">客户简称：{{item.customerName}}</text> <text class="shipmentNum itemTxt">出货件数：{{item.goodNum}}</text> </view> <view class="dataRow"> <text class="statistics itemTxt">金额统计：<text class="orderAmount">￥{{item.amount}}</text></text> <text class="createTime itemTxt">提交日期：{{item.createTime}}</text> </view> </view> </block> </view> <!-- 为空提示 --> <view class="nothingBox" wx:if="{{obj4.isEmpty == 1 && obj4.orderLst.length == 0}}"> <image class="nothingPic" src="QHImage/nothingPic.png" mode="widthFix"></image> <text class="nothingTip">没有查询到产品信息</text> </view> </view> <!-- 操作提示 --> <view class="operateTip {{operateTip.isShowTip ? 'showOperateTip' : 'nothing'}}">{{operateTip.tipTxt}}</view>
// pages/YT/productShipment.js Page({ /** * 页面的初始数据 */ data: { selectIndex: 1, operateTip: { isShowTip: false, tipTxt: "" }, obj1: { // 发货扫码 deliveryNo: "", imgLst: [] }, obj2: { // 货运扫描 deliveryNo: "", logisticsNo: "", imgLst: [] }, obj3: { // 货运查询 logisticsNo: "", logisticsInfo: "" }, obj4: { // 发货查询 startDate: "", endDate: "", orderLst: [] } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; }, // 切换 changeNav: function(e) { var that = this; var index = e.currentTarget.dataset.index; that.setData({ selectIndex: index }); }, // 扫码 scanCode: function(e) { var that = this; var inputIndex = e.currentTarget.dataset.index; wx.scanCode({ success(res) { var shipmentNo = "2021112912312312"; // 假设单号 switch(inputIndex) { case "1": that.setData({ "obj1.deliveryNo": shipmentNo }); break; case "2": that.setData({ "obj2.deliveryNo": shipmentNo }); break; case "3": that.setData({ "obj2.logisticsNo": shipmentNo }); break; case "4": that.setData({ "obj3.logisticsNo": shipmentNo }); break; default: break; } }, fail(res) { wx.showToast({ title: "扫码失败", icon: "none", duration: 1300 }) } }); }, // 发货扫码--出货单号 getInputTxt1: function(e) { this.setData({ "obj1.deliveryNo": e.detail.value }); }, // 货运扫描--出货单号 getInputTxt2: function(e) { this.setData({ "obj2.deliveryNo": e.detail.value }); }, // 货运扫描--物流单号 getInputTxt3: function(e) { this.setData({ "obj2.logisticsNo": e.detail.value }) }, // 图片上传 uploadImg: function(e) { var that = this; var imgLstIndex = e.currentTarget.dataset.index; var imgLst1 = that.data.obj1.imgLst; var imgLst2 = that.data.obj2.imgLst; var count = imgLstIndex == 1 ? (5 - imgLst1.length) : (5 - imgLst2.length); wx.chooseImage({ count: count, sizyType: ["original", "compressed"], sourceType: ["album", "camera"], success: function(res) { var imgs = res.tempFilePaths; switch(imgLstIndex) { case "1": that.setData({ "obj1.imgLst": imgLst1.concat(imgs) }); break; case "2": that.setData({ "obj2.imgLst": imgLst2.concat(imgs) }); break; default: break; } } }); }, // 查看图片 previewImg: function(e) { var that = this; var imgLstIndex = e.currentTarget.dataset.info; var imgIndex = e.currentTarget.dataset.index; if(imgLstIndex == 1) { wx.previewImage({ current: that.data.obj1.imgLst[imgIndex], urls: that.data.obj1.imgLst }); } else { wx.previewImage({ current: that.data.obj2.imgLst[imgIndex], urls: that.data.obj2.imgLst }) } }, // 删除图片 deleteImg: function(e) { var that = this; var imgLstIndex = e.currentTarget.dataset.info; var imgIndex = e.currentTarget.dataset.index; if(imgLstIndex == 1) { var imgLst1 = that.data.obj1.imgLst; imgLst1.splice(imgIndex, 1); that.setData({ "obj1.imgLst": imgLst1 }); } if(imgLstIndex == 2) { var imgLst2 = that.data.obj2.imgLst; imgLst2.splice(imgIndex, 1); that.setData({ "obj2.imgLst": imgLst2 }); } }, // 提交--发货扫码 submitPartOne: function() { var that = this; that.upImgFile(that.data.obj1.imgLst); that.setData({ "obj1.deliveryNo": "", "obj1.imgLst": [], "operateTip.isShowTip": true, "operateTip.tipTxt": "已提交审核", }); that.hideOperateTip(); }, // 提交--货运扫描 submitPartTwo: function() { var that = this; that.upImgFile(that.data.obj2.imgLst); that.setData({ "obj2.deliveryNo": "", "obj2.logisticsNo": "", "obj2.imgLst": [], "operateTip.isShowTip": true, "operateTip.tipTxt": "已提交审核", }); that.hideOperateTip(); }, // 上传图片至服务器 upImgFile: function(imgArr) { var i; for(i = 0; i < imgArr.length; i++) { wx.uploadFile({ url: "http://192.168.1.121:8025/Handle/AjaxUpload.ashx", filePath: imgArr[i], name: "file", success(res) { } }) } }, // 获取货运单号 getInputTxt4: function(e) { this.setData({ "obj3.logisticsNo": e.detail.value }); }, // 货运查询 searchLogistics: function() { var that = this; var logisticsNo = that.data.obj3.logisticsNo; if(!!logisticsNo) { that.loadLogisticsData(); } else { that.setData({ "operateTip.isShowTip": true, "operateTip.tipTxt": "请输入单号", }); that.hideOperateTip(); } }, // 物流信息 loadLogisticsData: function() { var that = this; var logisticsJson = { address: "广东省东莞市厚街镇家具大道30号广东省 东莞市厚街镇家具大道30号", stateArr: [ { time: "16:20", date: "0-05", state: "签收", stateTxt: "快递已送达广东省东莞市厚街镇家具大道30 号 签收人：詹某某" }, { time: "13:20", date: "03-05", state: "派件中", stateTxt: "" }, { time: "12:20", date: "01-05", state: "运输中", stateTxt: "货物正在派件请注意查收" }, { time: "11:20", date: "01-04", state: "运输中", stateTxt: "货物到达某站点" }, { time: "09:20", date: "01-03", state: "运输中", stateTxt: "货物离开南康物流中心，前往东莞物流中心" }, { time: "23:20", date: "01-02", state: "已揽收", stateTxt: "" }, { time: "12:20", date: "01-02", state: "卖家已发货", stateTxt: "" } ] }; if(logisticsJson.stateArr.length > 0) { that.setData({ "obj3.logisticsInfo": logisticsJson }); } else { that.setData({ "operateTip.isShowTip": true, "operateTip.tipTxt": "查询不到该单号物流信息", }); that.hideOperateTip(); } }, // 选择时间 startDateChange: function(e) { var that = this; that.setData({ "obj4.startDate": e.detail.value }); }, endDateChange: function(e) { this.setData({ "obj4.endDate": e.detail.value }); }, // 发货查询 searchOrder: function() { var that = this; var startDate = that.data.obj4.startDate; var endDate = that.data.obj4.endDate; if(!!startDate && !!endDate) { that.loadOrderData(); } else { that.setData({ "operateTip.isShowTip": true, "operateTip.tipTxt": "请选择时间", }); that.hideOperateTip(); } }, loadOrderData: function() { var that = this; var orderInfo = [ {"orderNo": "YTXCX2021", "customerName": "晨希纳","goodNum": "12345","amount": "26850", "createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"}, {"orderNo": "YTXCX2021","customerName": "晨希纳","goodNum": "12345","amount": "26850","createTime": "2021/12/10"} ]; // 数据项为 0 时，显示为空提示 var isEmpty = orderInfo.length > 0 ? 0 :1; that.setData({ "obj4.orderLst": orderInfo, "obj4.isEmpty": isEmpty }); }, // 关闭操作提示 hideOperateTip: function() { var that = this; setTimeout(function() { that.setData({ "operateTip.isShowTip": false, "operateTip.tipTxt": "", }); }, 1000) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, })
view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad {box-sizing:border-box;padding:0;margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height: 1;} page {background-color: #f5f5f5;} .flexBox { display: flex; justify-content: space-between; align-items: center; } .radius10 {border-radius: 10rpx;} .btnActive:active { filter: opacity(.85);} /* 导航切换 */ .navSec { position: fixed; top: 0; left: 0; z-index: 4; width: 100%; background-color: #fff; } .navItem { position: relative; display: block; width: 25%; height: 62rpx; line-height: 62rpx; font-size: 26rpx; text-align: center; color: #333; } .selectedNav { font-weight: 800; color: #399EFF; } .navItem::after { position: absolute; content: ''; width: 0; left: 50%; bottom: 0; border-bottom: 2rpx solid; transform: translateX(-50%); } .selectedNav::after { width: 37.35%; transition: width .3s; } /* 发货扫码、货运扫描 */ .contentWrapper {display: none;} .showWrapper {display: block;} .wrapper1, .wrapper2 { padding: 92rpx 30rpx 0;} .scanContain { position: relative; z-index: 6; height: 110rpx; padding: 0 20rpx; margin-bottom: 30rpx; background-color: #fff; } .tipLabel { flex-shrink: 0; font-size: 28rpx; color: #333; } .inputBox { flex-grow: 1; height: 70rpx; padding-left: 20rpx; font-size: 28rpx; font-weight: 700; background-color: #f5f5f5; } .inputHolder { font-weight: 400; color: #A3A3A3; } .scanBtn:not([size=mini]) { position: absolute; right: 30rpx; z-index: 3; width: 118rpx; height: 44rpx; padding: 0; margin: 0; line-height: 40rpx; font-size: 24rpx; font-weight: 400; color: #fff; background-color: #399EFF; border-radius: 6rpx; } .iconScan { margin-left: 10rpx; width: 24rpx; height: 24rpx; vertical-align: middle; } /* 图片详情 */ .imgContain { padding: 22rpx 20rpx 0; font-size: 0; background-color: #fff; } .tipFile { padding-bottom: 20rpx; font-size: 26rpx; color: #333; } .tipNum { padding-left: 20rpx; color: #C6C6C6;} .imgItem, .uploadImgBtn { position: relative; display: inline-block; overflow: hidden; width: 158rpx; height: 158rpx; margin: 0 30rpx 30rpx 0; } .uploadImg { width: 100%;height: 100%; } .uploadImgBtn { text-align: center; background-color: #f5f5f5; } .delImgBtn { position: absolute; right: 0; z-index: 3; width: 50rpx; height: 50rpx; padding: 10rpx; line-height: 30rpx; font-size: 28rpx; text-align: center; color: #399EFF; background-clip: content-box; border-radius: 50%; background-color: #fff; transform: rotate(45deg); } .delImgBtn:active { color: #fff; background-color: #399EFF; transition: all .2s; } .uploadIcon { display: block; width: 48rpx; height: 48rpx; margin: 38rpx auto 24rpx; } .uploadTip { font-size: 22rpx;color: #7F7F7F; } .fixFoot { position: fixed; bottom: 0; left: 0; z-index: 4; width: 100%; padding: 10rpx 30rpx; background-color: #fff; transition: all .3s; } .hideFoot { visibility: hidden;opacity: 0; } .showFoot { visibility: visible;opacity: 1; } .submitBtn:not([size=mini]) { width: 100%; height: 78rpx; padding: 0; margin: 0 auto; line-height: 78rpx; font-size: 30rpx; font-weight: 400; color: #fff; border-radius: 39rpx; background-color: #399EFF; } /* 货运查询 */ .wrapper3 {padding: 222rpx 0 30rpx;} .logisticsScanContain { position: fixed; top: 62rpx; width: 100%; height: 130rpx; padding: 0 30rpx; } .logisticsScanBtn:not([size=mini]) { right: 180rpx;} .logisticsSearchBtn:not([size=mini]) { flex-shrink: 0; width: 120rpx; height: 70rpx; padding: 0; margin: 0 0 0 20rpx; line-height: 70rpx; font-size: 28rpx; color: #fff; background-color: #399EFF; } .logisticsContain { width: 92%; padding: 30rpx 20rpx 30rpx 52rpx; margin: 0 auto; background-color: #fff; } .logisticsItem { display: flex; padding-bottom: 70rpx; margin-top: -24rpx; color: #7F7F7F; border-left: 2rpx solid #C6C6C6; } .logisticsItem:nth-child(2) { color: #333;} .logisticsItem:last-child { padding-bottom: 10rpx; border-color: rgba(0,0,0,0); } .logisticsAddr { position: relative; display: flex; align-items: center; min-height: 120rpx; padding: 0 0 60rpx 44rpx; color: #7F7F7F; border-left: 2rpx solid #C6C6C6; } .iconAddr, .logisticsAddr::before { position: absolute; top: 0; content: ""; left: -33rpx; width: 66rpx; height: 66rpx; background-color: #399EFF; border-radius: 50%; } .logisticsAddrTxt { font-size: 24rpx; line-height: 1.5; } .logisticsTimeLeft { position: relative; flex-shrink: 0; width: 138rpx; text-align: center; } .logisticsTimeLeft::before { position: absolute; top: 20rpx; left: -11rpx; content: ""; width: 20rpx; height: 20rpx; background-color: #C6C6C6; border-radius: 50%; } .logisticsItem:nth-child(2) .logisticsTimeLeft::before { background-color: #399EFF; } .logisticsTime { display: block;font-size: 24rpx;} .logisticsDate {font-size: 18rpx;} .logisticsTxtRight {flex-grow: 1;} .logisticsState { display: block; padding: 16rpx 0 10rpx; font-size: 28rpx; } .logisticsTxt { font-size: 24rpx; } /* 发货查询 */ .wrapper4 { padding-top: 328rpx; } .dateFilterContain { position: fixed; top: 62rpx; z-index: 5; width: 100%; padding: 24rpx 50rpx 20rpx; background-color: #fff; } .filterTip { font-size: 26rpx; color: #333; } .dateBox { position: relative; margin: 14rpx auto 20rpx } .dateBox::before { position: absolute; top: 50%; left: 50%; content: ""; width: 42rpx; height: 1rpx; background-color: #A3A3A3; transform: scaleY(.5) translate(-50%, -50%); } .startDate, .endDate { position: relative; display: inline-block; width: 290rpx; height: 56rpx; line-height: 56rpx; font-size: 26rpx; text-align: center; color: #A3A3A3; border-radius: 28rpx; background-color: #f5f5f5; } .startDate::after, .endDate::after { position: absolute; top: 40%; right: 26rpx; content: ""; width: 10rpx; height: 10rpx; color: #A3A3A3; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); } .noEmptyDate, .noEmptyDate::after { color: #333; } .shipmentSearchBtn:not([size=mini]) { width: 100%; height: 70rpx; padding: 0; margin: 0; line-height: 70rpx; font-size: 26rpx; font-weight: 400; color: #fff; background-color: #399EFF; border-radius: 35rpx } /* 出货项 */ .shipmentItem { width: 92%; padding: 26rpx 20rpx 10rpx 30rpx; margin: 0 auto 30rpx; background-color: #fff; border-radius: 10rpx; } .shipmentNo { display: block; padding-bottom: 26rpx; line-height: inherit; font-size: 30rpx; font-weight: 700; line-height: 1.3; word-break: break-all; word-wrap: break-word; color: #333; } .dataRow { display: flex; margin-bottom: 14rpx; } .itemTxt { display: block; flex-shrink: 0; line-height: 1.3; word-break: break-all; word-wrap: break-word; font-size: 26rpx; color: #7F7F7F; } .customerName, .statistics { min-width: 320rpx; max-width: 400rpx; padding-right: 20rpx; } .orderAmount { font-weight: 700; color: #399EFF; } .shipmentNum, .createTime { flex: 1 0 0; } /* 为空提示 */ .nothingBox { width: 400rpx; padding-top: 120rpx; margin: 0 auto; text-align: center; } .nothingPic { width: 400rpx; height: 400rpx; } .nothingTip { font-size: 26rpx; color: #7f7f7f; } /* 操作提示 */ .operateTip { position: fixed; left: 50%; bottom: 128rpx; min-width: 192rpx; height: 57rpx; padding: 0 20rpx; line-height: 57rpx; font-size: 30rpx; text-align: center; color: #fff; visibility: hidden; opacity: 0; background-color: rgba(51,51,51,.7); border-radius: 10rpx; transform: translateX(-50%); } .showOperateTip { animation: showTip 1s ; } @keyframes showTip { 0% { visibility: hidden;opacity: 0; } 100% { visibility: visible;opacity: 1; } }
示例：
