uniapp視訊圖片上傳
阿新 • • 發佈:2020-08-15
<template> <view class="release-page"> <!-- #ifdef APP-PLUS --> <uni-nav-bar fixed="true" left-icon="back" :status-bar="true" :border="false" title="釋出" @clickLeft="back"> </uni-nav-bar> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <uni-nav-bar fixed="true" :border="false"> </uni-nav-bar> <view style="height:80rpx;"></view> <!-- #endif --> <view class="allBox"> <!-- 輸入內容 --> <view class="textBox"> <textarea class="site fontSize" minlength="0" maxlength="100" @input="descInput" v-model="form.goods_text" placeholder="請輸入內容"></textarea> <text class="xianzhi">{{remnant}}/100</text> <view class="video" @click="getVideo"> <image src="/static/image/video1.png"></image> </view> <view class="photo" @click="getImg"> <image src="/static/image/photo1.png"></image> </view> <text class="inputCss fontSize"> <text class="tipsX">*</text> 上傳圖片或視訊(圖片最多上傳9張,視訊最多上傳1個) </text> </view> <view class="upload"> <!-- <input class="inputCss fontSize" disabled placeholder="上傳圖片或時評(圖片最多上傳9張,視訊最多上傳1個)" type="text" /> --> <view class="imageBox flexWrap"> <view v-if="showList.length > 0" v-for="(item,index) in showList" :key="index" class="imgre"> <text @click="del(index)" class="del themeG">×</text> <image v-if="item.type == 'img'" @click="lookPic(index,showList)" :src="item.img" mode="" class="selectImg"></image> <image v-if="item.type =='video'" @click="payModeSelect(index)" :src="item.img+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,ar_auto'" mode="" class="selectImg"></image> <u-icon v-if="item.type =='video'" @click="payModeSelect(index)" color="#fff" name="play-circle" size="60" class="play"></u-icon> </view> <!-- <image @click="getImg" v-if="fileList.length < 9" src="../../../static/image/save.png" mode="" class="selectImg"></image> --> </view> </view> <view class="formBox"> <!-- 商品分類 --> <view class="classification"> <text class="tipsX">*</text> <text class="fontSize">商品分類</text> <view class="selectList"> <picker mode="multiSelector" class="cpicker" @change="changePicker" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"> <input disabled type="text" v-model="form.memberType" class="listIpt" /> </picker> <u-icon name="arrow-right"></u-icon> </view> </view> <!-- 商品標題 --> <view class="classification"> <text class="tipsX">*</text> <text class="fontSize">商品標題</text> <view class="selectList"> <input type="text" v-model="form.goods_name" class="listIpt" /> <!-- <u-icon name="arrow-right"></u-icon> --> </view> </view> <!-- 商品原價 --> <!-- <view class="classification" @click="getFocus(0)"> <text>商品原價</text> <view class="selectList"> <text v-if="form.goods_marketprice">¥</text> <input type="number" :focus="evaluateState" @blur="blurFocus(0)" maxlength="8" v-model="form.goods_marketprice" :style="{width:priceWidth+'upx'}" @input="priceInput" class="listIpt" /> </view> </view> --> <!-- 商品現價 --> <view class="classification" @click="getFocus(1)"> <text class="tipsX">*</text> <text class="fontSize">商品現價</text> <view class="selectList"> <text v-if="form.goods_price">¥</text> <input type="number" :focus="evaluateState1" @blur="blurFocus(1)" maxlength="8" v-model="form.goods_price" :style="{width:priceWidth2+'upx'}" @input="priceInput2" class="listIpt" /> <!-- <u-icon name="arrow-right"></u-icon> --> </view> </view> <!-- 庫存 --> <view class="classification" @click="getFocus(0)"> <text class="tipsX">*</text> <text class="fontSize">商品庫存</text> <view class="selectList"> <input type="number" :focus="evaluateState" @blur="blurFocus(0)" maxlength="8" v-model="form.goods_storage" @input="priceInput" class="listIpt" /> </view> </view> <!-- 配送方式 --> <view class="classification"> <text class="tipsX">*</text> <text class="fontSize">配送方式</text> <view class="selectList"> <picker mode="selector" class="cpicker" @change="changePickerF" :value="listIndex" :range="listMode"> <text class="fontSizeSM">{{listMode[listIndex]}}</text> </picker> <u-icon name="arrow-right"></u-icon> </view> </view> <!-- 商品運費 --> <view class="classification" @click="getFocus(2)"> <text class="tipsX">*</text> <text class="fontSize">商品運費</text> <view class="selectList"> <text v-if="form.goods_freight || listIndex && default_shipping_fee">¥</text> <input v-if="listIndex == 1" :value="default_shipping_fee" type="number" disabled style="width:100px;" class="listIpt" /> <input v-else type="number" :focus="evaluateState2" @blur="blurFocus(2)" maxlength="8" :style="{width:priceWidth3+'upx'}" @input="priceInput3" v-model="form.goods_freight" class="listIpt" /> </view> </view> <!-- 是否可以退款 --> <!-- <view class="classification"> <text>能否退貨</text> <view class="selectList"> <picker mode="selector" class="cpicker" @change="isRefundChangePicker" :value="isRefund" :range="isRefundList"> <text>{{isRefundList[isRefund]}}</text> </picker> <u-icon name="arrow-right"></u-icon> </view> </view> --> <!-- 發貨地址 --> <view class="classification" @click="selectAddress"> <text class="tipsX">*</text> <text class="fontSize">發貨地址</text> <view class="selectList"> <input type="text" disabled v-model="addressText" class="listIpt" /> <u-icon name="arrow-right"></u-icon> </view> </view> </view> <view class="relesePage" @click="uploadShop" :class="{'isClick':isClick}"> 釋出 </view> </view> <!-- 彈框 --> <uni-popup ref="payMode" type="center" :animation="true"> <view class="picBox"> <video :src="lookPicIndex" controls autoplay></video> </view> </uni-popup> </view> </template> <script> import uniPopup from '@/component/uni-popup/uni-popup.vue'; import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue'; export default { components: { uniPopup, uniNavBar }, data() { return { showList: [], fileList: [], listMode:['快遞','平臺配送'], listIndex:1, isRefundList:['否','是'], isRefund:0, form: { goods_name: '', goods_price: '', goods_freight_type:1, goods_freight: '', memberType: '', goods_text: '', goods_storage:'' }, place_of_delivery: '', idsForm: { gc_id_1: '', gc_id_2: '', gc_id_3: '' }, addressText: '', video: '', image: '', show: false, // needFreight: null, remnant: 0, oneType: [], twoType: [], threeType: [], oneTypeIndex: 0, twoTypeIndex: 0, multiArray: [], multiIndex: [0, 0, 0], oldIndex: [], allClass: [], isFreight: false, lookPicIndex:'', recordIndex: null, priceWidth:60, afterWidth:0, priceWidth2:60, afterWidth2:0, priceWidth3:60, afterWidth3:0, evaluateState:false, evaluateState1:false, evaluateState2:false, titleFocus:false, imgList:[], isClick:false, default_shipping_fee:'' } }, onLoad(e) { let addressId = uni.getStorageSync("address"); if (addressId) { let that = this; that.place_of_delivery = addressId; that.getAddressDetail(addressId); uni.getStorage({ key:"allData", success(res) { let data = JSON.parse(res.data); if(data.form.goods_price){ that.priceWidth2 = that.priceWidth2+(data.form.goods_price.length*20); } if(data.form.goods_freight){ that.priceWidth3 = that.priceWidth3+(data.form.goods_freight.length*20); } that.form = data.form; that.fileList = data.fileList; that.showList = data.showList; that.idsForm = data.idsForm; that.video = data.video; that.listIndex = data.listIndex; } }) } }, onShow() { let that = this; that.getAddressData(); that.getUserInfo(); that.getClass(); uni.getStorage({ key: 'address', success(res) { if (res.data) { that.getAddressDetail(res.data); that.place_of_delivery = res.data; } } }); }, methods: { back(){ uni.switchTab({ url:'/pages/index/index' }) }, getAddressData () { let that = this; that.$util.request({ url:'/mobile/index.php?act=member_address&op=address_list', method:'get', data:{} }).then(res =>{ if(res.error_code == 0) { for(var i = 0; i < res.datas.address_list.length ; i++){ if(res.datas.address_list[i].is_default == 1){ that.addressText = res.datas.address_list[i].area_info + ' ' + res.datas.address_list[i].address; that.place_of_delivery = res.datas.address_list[i].address_id; } } } }) }, // 獲取使用者資訊 getUserInfo() { this.$util.request({ url: '/mobile/index.php?act=member_index&op=index', method: 'post', data: {} }).then(res => { if (res.error_code == 0) { if (res.datas.member_is_store == 0) { uni.showToast({ title: '您還不是賣家,請先申請入駐', icon: 'none', duration: 1000, success() { // 此處得改 setTimeout(() => { uni.navigateTo({ url: '/pagesB/pages/sellerPresence/sellerPresence' }) }, 1000) } }) } } }) }, // 圖片預覽 lookPic(current,urls){ let newArr = []; for(var i = 0; i < urls.length; i++){ if(urls[i].type == 'img'){ newArr.push(urls[i].img); } } urls = newArr; uni.previewImage({ current:current, urls:urls, indicator:'number' }) }, // 彈窗 payModeSelect(index) { let that = this; this.$refs.payMode.open() this.lookPicIndex = this.showList[index].img; }, closeWin() { this.$refs.payMode.close() }, getAddressDetail(id) { let that = this; that.$util.request({ url: '/mobile/index.php?act=member_address&op=address_info', method: 'get', data: { address_id :id } }).then(res => { that.addressText = res.datas.address_info.area_info + ' ' + res.datas.address_info.address;; }) }, getImg() { let that = this; if (that.showList.length >= 9) { uni.showToast({ title: '上傳數量上限', icon: 'none', duration: 1000 }) return false; } uni.chooseImage({ count: 9, sourceType: ['album', 'camera'], success(res) { // let img = res.tempFilePaths; // console.log(res.tempFilePaths) // let img = res.tempFilePaths[0].join(","); let url = 'index.php?act=goods&op=authUploadImg'; // console.log(img); let iNum = 9 - that.showList.length; for(let i = 0; i < res.tempFilePaths.length; i++){ if(i == iNum){ return false } setTimeout(()=>{ that.uploadImg(res.tempFilePaths[i], 'img', '圖片', url) },i*200) } if(res.tempFilePaths.length > iNum){ uni.showToast({ title:'上傳數量上限', icon:'none' }) } // console.log(res.tempFilePaths[0].split(",")) // that.uploadImg(res.tempFilePaths[0], 'img', '圖片', url) } }) }, // 獲取視訊 getVideo() { let that = this; if (that.showList.length >= 9) { uni.showToast({ title: '上傳數量上限', icon: 'none', duration: 1000 }) return } if (that.video) { uni.showToast({ title: '視訊只能上傳1個', icon: 'none', duration: 1000 }) return } uni.chooseVideo({ count: 1, sourceType: ['camera', 'album'], success: function(res) { let url = 'index.php?act=goods&op=upload_video'; let str = res.tempFilePath.substring(0,4); // 拍攝 if(str != "file"){ let result = that.uploadPro(res.tempFilePath, '視訊', url); result.then(imgStr=>{ imgStr = JSON.parse(imgStr.data); if (imgStr.error_code == 0) { that.recordIndex = that.showList.length; that.showList.push({ img: imgStr.datas.full_image_url, type: 'video' }) that.video = imgStr.datas.image_url; uni.showToast({ title: imgStr.message, icon: "none" }) } else { uni.showToast({ title: imgStr.message, icon: "none" }) } uni.hideLoading(); }); }else{ that.uploadImg(res.tempFilePath, 'video', '視訊', url) } }, fail(e) { console.log(e) } }); }, // 圖片視屏刪除 del(index) { if (this.recordIndex == index) { this.video = ''; this.showList.splice(index, 1); this.recordIndex = null; } else { this.showList.splice(index, 1); if(this.recordIndex != null && this.recordIndex < index){ this.fileList.splice(index-1, 1); }else{ this.fileList.splice(index, 1); } if (this.recordIndex > index) { this.recordIndex--; } } }, // 返回上一頁 onBackPress(e) { if (e.from == "backbutton") { uni.removeStorage({ key: 'allData' }) uni.navigateBack({ delta: 1 }) } }, // 釋出 uploadShop() { let that = this; if(that.isClick){ return false; } that.image = ''; for (var i = 0; i < that.fileList.length; i++) { if (that.fileList[i].type == 'img') { that.image += that.fileList[i].img; that.image += ',' } } that.image = that.image.substr(0, that.image.length - 1); // if (this.listIndex == 1) { // this.form.goods_freight = this.needFreight; // } if(that.image == "" && that.video == ""){ uni.showToast({ title:'必須上傳一張圖片或者視訊', icon:'none' }) return false } if(that.idsForm.gc_id_1 == '' && that.idsForm.gc_id_2 == ''){ uni.showToast({ title:'請選擇分類', icon:'none' }) return false } if(that.form["goods_storage"] < 1){ uni.showToast({ title:'庫存不能小於1', icon:'none' }) return false } for (var i in that.form){ if(that.listIndex == 1){ if(that.form[i] == '' && i != "goods_freight"){ uni.showToast({ title:'請完善資訊', icon:'none' }) return false } }else{ if(that.form[i] == ''){ uni.showToast({ title:'請完善資訊', icon:'none' }) return false } } } let data = { goods_text: that.form.goods_text, gc_id_1: that.idsForm.gc_id_1, gc_id_2: that.idsForm.gc_id_2, goods_name: that.form.goods_name, goods_price: that.form.goods_price, goods_freight: that.form.goods_freight, goods_freight_type:that.form.goods_freight_type, place_of_delivery: that.place_of_delivery, goods_video: that.video, goods_image: that.image, goods_storage:that.form.goods_storage } that.isClick = true; that.$util.request({ url: '/mobile/index.php?act=goods&op=add_goods', method: 'post', data: data }).then(res => { if (res.error_code == 0) { uni.showToast({ title: res.message, icon: 'success', duration: 1000, success() { setTimeout(()=>{ uni.navigateTo({ url: '/pagesA/pages/user/sell' }) that.clearData(); },1000) } }) uni.removeStorage({ key: 'allData' }) uni.removeStorage({ key: 'address' }) } else { uni.showToast({ title: res.message, icon: 'none', duration: 1000 }) } setTimeout(()=>{ that.isClick = false; },2000) }) }, // 跳轉到地址 selectAddress() { let allData = { form:this.form, fileList:this.fileList, showList:this.showList, idsForm:this.idsForm, video:this.video, listIndex:this.listIndex } uni.setStorage({ key: 'allData', data: JSON.stringify(allData) }) uni.navigateTo({ url: '/pages/address/address?type=releaseA' }) }, descInput() { var txtVal = this.form.goods_text.length; this.remnant = txtVal; }, popup(index) { this.form.freeItem = this.list[index].text; }, // 獲取分類 getClass() { this.multiArray = []; this.oneType = []; this.twoType = []; this.$util.request({ url: '/mobile/index.php?act=goods_class&op=getAllClass', method: 'get', data: {} }).then(res => { this.allClass = res.datas.goods_class; this.default_shipping_fee = res.datas.default_shipping_fee; this.renderPicker(true); }) }, // 聯動處理 renderPicker(isT, arr) { let num = 1; let num1 = 1; if (isT) { this.oneType = []; } for (var i = 0; i < this.allClass.length; i++) { if (isT) { this.oneType.push(this.allClass[i].gc_name); this.twoType = []; } else { if (this.oneType[arr[0]] == this.allClass[i].gc_name) { this.idsForm.gc_id_1 = this.allClass[i].gc_id; this.oldIndex[0] = this.allClass[i].gc_id; } } if (this.allClass[this.oneTypeIndex].class2.length != 0) { for (var j = 0; j < this.allClass[this.oneTypeIndex].class2.length; j++) { if (isT) { this.twoType.push(this.allClass[this.oneTypeIndex].class2[j].gc_name); this.threeType = []; } else { if (this.twoType[arr[1]] == this.allClass[this.oneTypeIndex].class2[j].gc_name) { if (num == 1) { this.idsForm.gc_id_2 = this.allClass[this.oneTypeIndex].class2[j].gc_id; this.oldIndex[1] = this.allClass[this.oneTypeIndex].class2[j].gc_id; num++; } } } // if (this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3.length != 0) { // for (var l = 0; l < this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3.length; l++) { // if (isT) { // this.threeType.push(this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_name); // } else { // if (this.threeType[arr[2]] == this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_name) { // if (num1 == 1) { // this.idsForm.gc_id_3 = this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_id; // this.oldIndex[2] = this.allClass[this.oneTypeIndex].class2[this.twoTypeIndex].class3[l].gc_id; // num1++; // } // } // } // } // } } } } // console.log(this.oneType) if (isT) { if (this.oneType.length != 0) { this.multiArray.push(this.oneType); } if (this.twoType.length != 0) { this.multiArray.push(this.twoType); } // if (this.threeType.length != 0) { // this.multiArray.push(this.threeType); // } } }, bindMultiPickerColumnChange: function(e) { this.multiArray = []; if (e.detail.column == 0) { this.oneTypeIndex = e.detail.value; this.twoTypeIndex = 0; } else if (e.detail.column == 1) { this.twoTypeIndex = e.detail.value; } this.multiIndex[e.detail.column] = e.detail.value; this.renderPicker(true); this.$forceUpdate(); }, // 確定時改變 changePicker(e) { // if (e.detail.value.length == 3 && this.threeType[e.detail.value[2]] != undefined) { // this.form.memberType = this.multiArray[0][this.multiIndex[0]] + ',' + this.multiArray[1][this.multiIndex[1]] + ',' + // this.multiArray[2][this.multiIndex[2]]; // } else { this.form.memberType = this.multiArray[0][this.multiIndex[0]] + ',' + this.multiArray[1][this.multiIndex[1]]; // } this.renderPicker(false, e.detail.value); }, changePickerF(e) { this.listIndex = e.detail.value; if (e.detail.value == 0) { // this.isFreight = false; // this.form.goods_freight = 0; this.form.goods_freight_type = 2; }else if(e.detail.value == 1){ // this.isFreight = true; this.form.goods_freight_type = 1; this.form.goods_freight = ''; } // else { // this.isFreight = false; // this.form.goods_freight = -1; // } }, // isRefundChangePicker(e){ // this.isRefund = e.detail.value; // this.form.goods_refund_type = e.detail.value; // }, uploadPro(tempFilePaths, text ,url) { uni.showLoading({ title:text+'上傳中' }) let that = this; let data = that.$utilImg.request(url); return new Promise(res => { uni.uploadFile({ // 需要上傳的地址 url: 'http://xbbang.aitecc.com/mobile/' + url, // filePath 需要上傳的檔案 filePath: tempFilePaths, name: 'file', formData: { key: data.key, api_sign: data.api_sign, comefrom: data.comefrom, api_time: data.api_time, api_member_id: data.api_member_id, api_member_name: data.api_member_name, }, success(res1) { res(res1); } }) }) }, // 圖片視屏上傳 async uploadImg(tempFilePaths, type, text, url) { let that = this; let imgStr = await that.uploadPro(tempFilePaths,text,url); imgStr = JSON.parse(imgStr.data); if (imgStr.error_code == 0) { if (type == 'img') { console.log(imgStr) that.showList.push({ img: imgStr.datas.full_image_url, type: 'img' }) that.fileList.push({ img: imgStr.datas.image_url, type: 'img' }); } else { that.recordIndex = that.showList.length; that.showList.push({ img: imgStr.datas.full_image_url, type: 'video' }) that.video = imgStr.datas.image_url; } uni.showToast({ title: imgStr.message, icon: "none" }) } else { uni.showToast({ title: imgStr.message, icon: "none" }) } uni.hideLoading() // uni.showToast({ // title: text + "上傳中", // icon: "none", // duration:1000, // success: (result) => { // } // }) }, // 長度計算 priceInput(e){ if(this.afterWidth < e.detail.value.length){ this.priceWidth += 20; }else if(this.afterWidth != e.detail.value.length){ if(this.priceWidth>40){ this.priceWidth -= 20; } } this.afterWidth = e.detail.value.length; }, // 長度計算 priceInput2(e){ if(this.afterWidth2 < e.detail.value.length){ this.priceWidth2 += 20; }else if(this.afterWidth2 != e.detail.value.length){ if(this.priceWidth2>40){ this.priceWidth2 -= 20; } } this.afterWidth2 = e.detail.value.length; }, // 長度計算 priceInput3(e){ if(this.afterWidth3 < e.detail.value.length){ this.priceWidth3 += 20; }else if(this.afterWidth3 != e.detail.value.length){ if(this.priceWidth3>40){ this.priceWidth3 -= 20; } } this.afterWidth3 = e.detail.value.length; }, getFocus(type){ if(type == 0){ this.evaluateState = !this.evaluateState; }else if (type == 1){ this.evaluateState1 = !this.evaluateState1; }else{ this.evaluateState2 = !this.evaluateState2; } }, blurFocus(type){ if(type == 0){ this.evaluateState = !this.evaluateState; }else if (type == 1){ this.evaluateState1 = !this.evaluateState1; }else{ this.evaluateState2 = !this.evaluateState2; } }, clearData(){ this.showList = [], this.fileList = [], this.listMode = ['快遞','平臺配送'], this.listIndex = 1, this.isRefundList =['否','是'], this.isRefund =0, this.form = { goods_name: '', goods_price: '', goods_freight: '', goods_freight_type:1, memberType: '', goods_text: '', goods_storage:'', }, this.place_of_delivery = '', this.idsForm = { gc_id_1: '', gc_id_2: '', gc_id_3: '' }, this.addressText = '', this.video = '', this.image = '', this.show = false, this.needFreight = null, this.remnant = 0, this.oneType = [], this.twoType = [], this.threeType = [], this.oneTypeIndex = 0, this.twoTypeIndex = 0, this.multiArray = [], this.multiIndex = [0, 0, 0], this.oldIndex = [], this.allClass = [], this.isFreight = false, this.lookPicIndex = '', this.lookPicType = '', this.recordIndex = null, this.priceWidth = 60, this.afterWidth = 0, this.priceWidth2 = 60, this.afterWidth2 = 0, this.priceWidth3 = 60, this.afterWidth3 = 0, this.evaluateState = false, this.evaluateState1 = false, this.evaluateState2 = false, this.titleFocus = false, this.imgList = [] } } } </script> <style scoped lang="scss"> .imagePic { width: 130rpx !important; height: 130rpx !important; } .fontSize { font-size: 35rpx !important; font-weight: 400 !important; } .fontSizeSM { font-size: 30rpx !important; font-weight: 400 !important; } .release-page { .allBox{ padding: 20upx; box-sizing: border-box; .textBox { width: 100%; position: relative; // background-color: #F7F7F7; // height: 520rpx; .site { width: 100%; height: 430upx; background: rgba(247, 247, 247, 1); border-radius: 8upx; // padding-left: 30upx; padding:20upx; // padding-top: 30upx; box-sizing: border-box; } .xianzhi { position: absolute; right: 36upx; bottom: 108upx; } .site::-webkit-input-placeholder { color: #ddd; } .video, .photo { position: absolute; left: 30upx; bottom: 120upx; width: 154upx; height: 154upx; display: flex; justify-content: center; align-items: center; background-color: #fff; cursor: pointer; image { width: 40upx; height: 34upx; color: rgba(251, 133, 57, 1); } .imageStyle { width: 154upx; height: 154upx; } } .photo { left: 225upx; } } .upload { margin-top: 46upx; .selectImg { width: 224rpx; height: 224rpx; border-radius: 20rpx; } .imageBox { .imgre { position: relative; margin-right: 14rpx; &:nth-child(3n) { margin-right: 0; } .play{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .del { position: absolute; color: #fff; right: 10rpx; top: 10rpx; width: 40rpx; height: 40rpx; border-radius: 50%; text-align: center; z-index: 99; } } } } .formBox { margin-top: 20upx; .classification { height: 70upx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f5f5f5; margin-bottom: 20upx; text { font-size: 24upx; font-family: PingFang SC; font-weight: 500; color: rgba(92, 92, 92, 1); } .selectList { display: flex; align-items: center; flex: 1; display: flex; justify-content: flex-end; .cpicker{ width: 100%; text-align: right; } .listIpt { // border: 1px solid #333; box-sizing: border-box; padding-left: 20upx; padding-right: 20upx; width: 100%; font-size: 30upx; text-align: right; font-family: PingFang SC; font-weight: 500; color: rgba(92, 92, 92, 1); } } } } .relesePage { height: 78upx; background: rgba(251, 133, 57, 1); border-radius: 8upx; font-size: 30upx; font-family: PingFang SC; font-weight: 500; color: rgba(255, 255, 255, 1); line-height: 78upx; text-align: center; margin-top: 61upx; } .isClick{ background-color: #ccc; } .showCreator { background: rgba(255, 255, 255, 1); border-radius: 30upx; .ht { height: 115upx; border-bottom: 1px solid #f5f5f5; line-height: 115upx; text-align: center; color: #333; } } } } .inputCss { color: #999999; margin-bottom: 20upx; display: flex; font-size: 30upx; flex-wrap: nowrap; } </style>