You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1068 lines
28 KiB

<template>
<view class="page1">
<view class="top" ref="top">
<view @tap="backPage" style="width: 80rpx;height: 80rpx;margin: 98rpx 0 0 30rpx;">
<uni-icons type="left" color="#fff" size="27"></uni-icons>
</view>
<view class="top1">
<text style="display: block;margin-top: 107rpx;color: #fff;">Ai入库</text>
</view>
</view>
<view class="content">
<view class="prompt">
<view class="prompt-title">
<view class="hello-right"></view>
<view class="ai-bot"></view>
<view class="hello-left">
<text style="font-size: 40rpx;font-weight: 800;line-height: 56rpx;color: #fff;">Hi</text>
</view>
</view>
<view class="prompt-title-text">
<text>欢迎使用Ai助手为了提高图片识别准确率建议您按照以下要求上传图片</text>
<text>1.每张图片建议您裁剪到20个规格或以下</text>
<text>2.确保最后一款商品规格截取完整</text>
<text>3.每张图片输入对应的规格数量</text>
<text>4.图片越清晰角度越正识别准确率越高,建议使用原相机拍照并在相册内截图后上传</text>
<text>5.如果拍照后找不到所拍照片打开微信的设置-通用-照片视频里面的照片点击开启后重启微信即可</text>
<text>6.点击可查看<text @tap="goTutorial" style="color: blue;">使用教程</text></text>
</view>
<view class="prompt-title-img">
<view class="img" v-for="(item,index) in imgList" :key="index">
<image show-menu-by-longpress :src="item" @tap="showImage(item)"></image>
</view>
</view>
</view>
<view @tap="toggle"
style="height: 98rpx;line-height: 98rpx;font-size: 34rpx;font-weight: bold;padding-left: 30rpx;position: relative;">
上传图片
<view class="title-line"></view>
<view class="icon-upload">
<uni-icons type="cloud-upload" color="#00BFFF" size="30"></uni-icons>
<text style="font-size: 24rpx;float: left;font-weight: normal;">点击此处添加主图</text>
</view>
</view>
<view v-for="(item,index) in purchaseOcrPictureList" :key="index"
style="display: flex;width: 100%;overflow: scroll;">
<view class="content-list-img">
<view class="del-icon" @tap="delImage(index)">
<uni-icons type="trash" color="#00BFFF" size="20"></uni-icons>
</view>
<image show-menu-by-longpress :src="item.ocrPicture" @load='loadImg'
@tap="showImage(item.ocrPicture)"></image>
<uni-easyinput type='number' prefixIcon="compose" v-model='item.count' placeholder="请输入规格数量"
@blur="numChange('zhu',item,index)"></uni-easyinput>
</view>
<view v-for="(items,indexs) in item.children" :key="indexs"
style="width: 200rpx;height: 280rpx;position: relative;background: #fff;margin-left: 20rpx;border-radius: 10px;">
<view class="del-icon" @tap="delSonImage(index,indexs)">
<uni-icons type="trash" color="#00BFFF" size="20"></uni-icons>
</view>
<image show-menu-by-longpress :src="items.ocrPicture" @load='loadImg'
@tap="showImage(items.ocrPicture)" style="width: 200rpx;height: 200rpx;padding: 5px;"></image>
<uni-easyinput type='number' v-model='items.count' placeholder="子图规格数量"
@blur="numChange('zi',item,index,items,indexs)"></uni-easyinput>
</view>
<view @tap="addSonImg(item.id)"
style="width: 200rpx;height: 219rpx;background: rgba(255,255,255,0.4);margin: 0 20rpx;border-radius: 10px;font-size: 24rpx;color: #777;text-align: center;">
<uni-icons type="plusempty" color="#777" size="80"></uni-icons>
<view style="height: 30rpx;line-height: 30rpx;">点击添加子图</view>
</view>
</view>
<view style="height:200rpx;"></view>
</view>
<view class="bottom-box" @tap="clickAiBtn">
<view class="run-line"></view>
<img class="bottom-img"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/27e2655fe19f454d93970f968d91fbef.png" alt="" />
<view class="bottom-btn">Ai识别</view>
</view>
<!-- 弹出层 -->
<uni-popup ref="popup" background-color="#fff">
<view style="height:300rpx;">
<view class="popup-photo" style="font-size: 28rpx;font-weight: 400;">提示:建议使用原相机拍照并在相册内截图后上传</view>
<!-- <view @tap="upLoadImg('pai')" class="popup-photo">拍照</view> -->
<view @tap="upLoadImg('xuan')" class="popup-photo">从相册选择</view>
<view @tap="$refs.popup.close()" class="popup-photo"
style="border-bottom:0;border-top:10px solid #eee;">取消</view>
</view>
</uni-popup>
<!-- 打印选择框 -->
<uni-popup ref="productDialog" background-color="#fff">
<view class="popup-pay-content"
:style="{background:'url('+purchaseOcrPictureList[0].ocrPicture+') no-repeat;background-size: 100%;'}">
<view class="popup-pay-shili">
<view class="popup-pay-title" style="margin-top: 50rpx;">
<text>识别规则示例</text>
</view>
<view class="content-fur">
<view>为了提高识别的准确率,请您找一款商品的一条规格信息作为AI识别的示例填入,图片中没有的信息不填</view>
<!-- <view>
<image :src="purchaseOcrPictureList[0].ocrPicture" style="width: 100%;height: 50rpx;background-size: 100%;background-repeat: no-repeat;"></image>
</view> -->
</view>
<view style="height: 350rpx;">
<view
style="padding-left: 40rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
货号:
</text>
<input v-model="productSn" disabled="true" @tap="clickInput('productSn')" type="text"
placeholder="请输入货号"
style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
<view
style="padding-left: 20rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
商品名:
</text>
<input v-model="productName" disabled="true" @tap="clickInput('productName')" type="text"
placeholder="请输入商品名"
style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
<view
style="padding-left: 40rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
采购价:
</text>
<input v-model="price" @focus="obtainPrice($event,'price')"
@blur="changessPrice($event,'price')" type="digit" placeholder="请输入价格"
style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
<view
style="padding-left: 20rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
数量:
</text>
<input v-model="productCount" @focus="obtainPrice($event,'productCount')"
@blur="changessPrice($event)" type="digit" placeholder="请输入数量"
style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
<view
style="padding-left: 40rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
颜色:
</text>
<input v-model="color" type="text" disabled="true" @tap="clickInput('color')"
placeholder="请输入颜色"
style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
<view
style="padding-left: 20rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
尺码:
</text>
<input v-model="size" type="text" disabled="true" @tap="clickInput('size')"
placeholder="请输入尺码"
style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
</view>
<view class="popup-pay-container" @tap="identify">
确认
</view>
</view>
</view>
</uni-popup>
<!-- -->
<uni-popup ref="tanDialog" background-color="#fff">
<view class="popup-pay-content" style="width: 100%;height: 400rpx;">
<view style="z-index: 99;background: #fff;border-top: 1px solid #eee;">
<view class="popup-pay-title" style="margin-top: 50rpx;">
<text>请输入{{name=='productSn'?'货号':name=='productName'?'商品名称':name=='price'?'价格':name=='productCount'?'数量':name=='color'?'颜色':name=='size'?'尺码':''}}</text>
</view>
<view style="height: 100rpx;">
<view
style="padding-left: 40rpx;display: flex;height: 80rpx;width: 90%;line-height: 80rpx;margin: 20rpx auto;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
{{name=='productSn'?'货号':name=='productName'?'商品名称':name=='price'?'价格':name=='productCount'?'数量':name=='color'?'颜色':name=='size'?'尺码':''}}
</text>
<input v-model="nameText" ref="inputText" :focus="focus" type="text" placeholder="请输入"
style="display: flex;height: 80rpx;width: 75%;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
</view>
<view class="popup-pay-container" @tap="shurukuang"
style="position: absolute;bottom: 10px;left: 5%;">
确认
</view>
</view>
</view>
</uni-popup>
<view v-if="isTake" style="position: fixed;width: 100%;height: 100%;z-index: 100;top: 0;">
<camera device-position="back" output-dimension='max' @initdone='showBtn' flash="off"
style="width: 100%; height: 100%;"></camera>
<view style="width: 100%;height: 120rpx;position: fixed;bottom:200rpx;" v-if="isShow == true">
<view @tap="takePhoto"
style="width: 120rpx;height: 120rpx;border-radius: 120rpx;background: #fff;margin: 0 auto;border: 2px solid #eee;">
<view
style="width: 116rpx;height: 116rpx;border-radius: 116rpx;background: #fff;margin: 0 auto;border: 1px solid #fff;">
</view>
</view>
<view @tap="isTake = false" style="position: absolute;top: 20rpx;left: 100rpx;">
<uni-icons type="close" color="#777" size="40"></uni-icons>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
imgList: [
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f51c446ef147437c9a8200ed2b43ec7f.jpg',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5444bab7df8d47e09c831c054b6e447b.jpg',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/44e7ccc2fae74db593bd1a10f538e2de.jpg',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2a55142e562b4ea480ce553c8b84d092.jpg'
],
isShow: false,
focus: false,
purchaseOcrPictureList: [],
parentPicturePath: '',
parentId: '',
newSubmit: [],
productSn: "",
productName: "",
price: "",
productCount: "",
color: "",
size: "",
keyBoardHeight: 0,
name: '',
nameText: '',
isTake: false
}
},
onShow() {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
},
fail() {
this.tui.toast("您未授权,AI入库功能可能会出现错误")
}
})
},
onLoad() {
},
methods: {
addSonImg(id) {
this.parentId = id
this.toggle()
},
splitData(str) {
return str.split('/')[3].split('.')[0]
},
clickAiBtn() {
this.newSubmit = []
if (this.purchaseOcrPictureList.length == 0) {
this.tui.toast("请选择要上传的图片")
return
}
for (let i = 0; i < this.purchaseOcrPictureList.length; i++) {
if (this.purchaseOcrPictureList[i].count == 0 || this.purchaseOcrPictureList[i].count == '') {
this.tui.toast("请输入数量")
return
} else {
let data = {
ocrPicture: this.purchaseOcrPictureList[i].ocrPicture,
count: this.purchaseOcrPictureList[i].count,
parentPicturePath: '',
ocrPictureOrder: i == 0 ? "" : i + 1
}
this.newSubmit.push(data)
if (this.purchaseOcrPictureList[i].children.length > 0) {
for (let m = 0; m < this.purchaseOcrPictureList[i].children.length; m++) {
if (this.purchaseOcrPictureList[i].children[m].count == 0 || this.purchaseOcrPictureList[i]
.children[m].count == '') {
this.tui.toast("请输入子图片的规格数量")
return
} else {
let data = {
ocrPicture: this.purchaseOcrPictureList[i].children[m].ocrPicture,
count: this.purchaseOcrPictureList[i].children[m].count,
parentPicturePath: this.purchaseOcrPictureList[i].ocrPicture,
ocrPictureOrder: i == 0 ? "" : (i + 1) + '-' + (m + 1)
}
this.newSubmit.push(data)
}
}
}
}
}
this.$refs.productDialog.open('bottom')
},
clickInput(name) {
this.name = name
if (this.name == 'productSn') {
this.nameText = this.productSn
} else if (this.name == 'productName') {
this.nameText = this.productName
} else if (this.name == 'price') {
this.nameText = this.price
} else if (this.name == 'productCount') {
this.nameText = this.productCount
} else if (this.name == 'color') {
this.nameText = this.color
} else if (this.name == 'size') {
this.nameText = this.size
}
this.$refs.tanDialog.open('bottom');
this.focus = false
this.$nextTick(() => {
this.focus = true
})
// this.focus = true
// this.$refs.inputText.focus();
},
numChange(type, item, index, items, indexs) {
if (type == 'zhu') {
if (item.count > 20) {
uni.showModal({
title: '提示',
showCancel: false,
content: '规格数不能超过20,例:“黑色M码”这种为一个规格,“黑色S码”或“白色L码”则为另外的规格,请以此种颜色+尺码组合为一种的方式来计数',
success: function(res) {}
});
this.purchaseOcrPictureList[index].count = ''
}
} else if (type == 'zi') {
if (items.count > 20) {
uni.showModal({
title: '提示',
showCancel: false,
content: '规格数不能超过20,例:“黑色M码”这种为一个规格,“黑色S码”或“白色L码”则为另外的规格,请以此种颜色+尺码组合为一种的方式来计数',
success: function(res) {}
});
this.purchaseOcrPictureList[index].children[indexs].count = ''
}
}
},
shurukuang() {
if (this.name == 'productSn') {
this.productSn = this.nameText
} else if (this.name == 'productName') {
this.productName = this.nameText
} else if (this.name == 'price') {
this.price = this.nameText
} else if (this.name == 'productCount') {
this.productCount = this.nameText
} else if (this.name == 'color') {
this.color = this.nameText
} else if (this.name == 'size') {
this.size = this.nameText
}
this.name = ""
this.nameText = ""
this.$refs.tanDialog.close()
},
loadImg() {
uni.hideLoading();
},
identify() {
let num = 0
if (this.productSn == "") {
num += 1
}
if (this.productName == "") {
num += 1
}
if (this.price == "") {
num += 1
}
if (this.productCount == "") {
num += 1
}
if (this.color == "") {
num += 1
}
if (this.size == "") {
num += 1
}
if (num == 6) {
this.tui.toast("未输入规格信息")
return
} else {
this.tui.request("/purchaseOcrPicture/batchSave", "POST", {
orderId: "",
purchaseOcrPictureList: this.newSubmit,
purchaseOcrExample: {
productSn: this.productSn,
productName: this.productName,
price: this.price,
productCount: this.productCount == '' ? '均码' : this.productCount,
color: this.color == '' ? '均色' : this.color,
size: this.size
}
}, false, false).then((res) => {
if (res.code == 200) {
uni.navigateBack({
delta: 1
})
} else {
this.tui.toast(res.message)
}
}).catch((res) => {})
}
},
backPage() {
uni.navigateBack({
delta: 1
})
},
//点击图片放大
showImage(img) {
uni.previewImage({
urls: [img],
current: img
})
},
toggle() {
let that = this;
uni.getSystemInfo({
success: function(res) {
that.$refs.popup.open('bottom')
}
});
},
showBtn() {
this.isShow = true
uni.hideLoading();
},
async upLoadImg(type) {
uni.showLoading({
title: '加载中...',
mask: true
})
let that = this;
if (type == 'ios') {
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['camera', 'album'],
camera: 'back',
success(res) {
that.upLoadFile(res.tempFiles[0].tempFilePath)
},
fail() {
uni.hideLoading();
}
})
} else if (type == 'pai') {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.isTake = true
uni.hideLoading();
},
fail() {
that.tui.toast("您未授权,AI入库功能可能会出现错误")
}
})
} else if (type == 'xuan') {
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album'],
success(res1) {
that.upLoadFile(res1.tempFiles[0].tempFilePath)
},
fail() {
uni.hideLoading();
}
})
}
await this.$refs.popup.close()
// uni.hideLoading();
},
async takePhoto() {
let that = this;
const ctx = uni.createCameraContext();
await ctx.takePhoto({
quality: 'high',
success: (res) => {
let ttt = that
uni.saveImageToPhotosAlbum({
filePath: res.tempImagePath,
success: function() {
ttt.cameraUpload()
}
});
},
fail(err) {
that.isTake = false
}
});
},
obtainPrice(e, type, num) {
this.linshiPrice = e.target.value
if (type == 'price') {
this.price = ''
} else if (type == 'productCount') {
this.productCount = ''
}
},
changessPrice(e, type) {
if (type == 'price') {
if (this.linshiPrice == e.target.value) {
this.price = e.target.value
} else {
if (e.target.value == '') {
this.price = this.linshiPrice
} else {
this.price = e.target.value
}
}
} else {
if (this.linshiPrice == e.target.value) {
this.productCount = e.target.value
} else {
if (e.target.value == '') {
this.productCount = this.linshiPrice
} else {
this.productCount = e.target.value
}
}
}
},
cameraUpload() {
let that = this;
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album'],
success(res1) {
that.isTake = false
that.upLoadFile(res1.tempFiles[0].tempFilePath)
},
fail() {
that.isTake = false
uni.hideLoading();
},
complete(res) {}
})
},
async upLoadFile(path) {
let that = this;
uni.showLoading({
title: '加载中...',
mask: true
})
let hiver_token = uni.getStorageSync("hiver_token")
await uni.uploadFile({
url: that.tui.interfaceUrl() + '/upload/file',
filePath: path,
name: 'file',
header: {
"content-type": "multipart/form-data",
'accessToken': hiver_token
},
formData: {},
success: (uploadFileRes) => {
let path = JSON.parse(uploadFileRes.data)
if (that.parentId != '') {
for (let i = 0; i < that.purchaseOcrPictureList
.length; i++) {
if (that.purchaseOcrPictureList[i].id ==
that.parentId) {
let data = {
ocrPicture: path.result,
count: '',
}
that.purchaseOcrPictureList[i].children
.push(data)
}
}
} else {
let data = {
ocrPicture: path.result,
count: '',
id: that.splitData(path.result),
children: []
}
that.purchaseOcrPictureList.push(data)
}
},
fail: (err) => {
uni.hideLoading();
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
})
}
});
await setTimeout(res => {
that.parentId = ''
// uni.hideLoading();
}, 1000)
},
delImage(index) {
let that = this;
uni.showModal({
title: "提示",
content: "确定删除吗?",
success: function(res) {
if (res.confirm) {
that.purchaseOcrPictureList.splice(index, 1);
}
}
})
},
getKeyBoardHeight(e) {
this.keyBoardHeight = e.detail.height
},
delSonImage(index, indexs) {
let that = this;
uni.showModal({
title: "提示",
content: "确定删除该子图吗?",
success: function(res) {
if (res.confirm) {
that.purchaseOcrPictureList[index].children.splice(indexs, 1);
}
}
})
},
goTutorial() {
uni.navigateTo({
url: `/package2/other/tutorialList`
})
}
}
}
</script>
<style lang="scss">
page,
.page1 {
background: #F1F5FB;
font-size: 28rpx;
}
.top {
width: 780rpx;
height: 390rpx;
opacity: 1;
background: linear-gradient(90deg, #6484fa 0%, #66e8ff 100%);
overflow: hidden;
}
.top1 {
width: 780rpx;
height: 390rpx;
opacity: 1;
text-align: center;
font-weight: bold;
font-size: 38rpx;
display: block;
background: linear-gradient(360deg, #FAF7F7 0%, rgba(255, 255, 255, 0) 100%);
overflow: hidden;
}
.ai-bot {
position: absolute;
top: -8rpx;
left: 10rpx;
width: 70rpx;
height: 60rpx;
background-size: 100% !important;
background: url(https://jewel-shop.oss-cn-beijing.aliyuncs.com/66dc640d9e8f4749a234d9ef2af1b257.png) no-repeat;
}
.hello-left {
width: 102rpx;
height: 56rpx;
opacity: 1;
margin-left: 100rpx;
background: linear-gradient(127.96deg, #6585fa 0%, #6ad5fe 100%);
border-radius: 3px;
text-align: center;
-webkit-transform: skewX(8deg);
transform: skewX(-6deg);
}
.hello-right {
position: absolute;
left: 5px;
bottom: 0rpx;
width: 120rpx;
height: 2px;
opacity: 1;
background: linear-gradient(180deg, #6585fa 0%, #6ad5fe 100%);
}
.image-box {
width: 120rpx;
height: 170rpx;
display: block;
overflow: hidden;
float: left;
}
.image {
width: 100rpx;
height: 100rpx;
margin: 35rpx 0 0 20rpx;
font-size: 36rpx;
background: #8470FF;
border-radius: 50%;
text-align: center;
line-height: 100rpx;
color: #fff;
}
.content-text {
width: 400rpx;
height: 200rpx;
float: left;
line-height: 50rpx;
padding-left: 30rpx;
}
.text {
color: #747474;
font-size: 28rpx;
}
.content-btn {
position: relative;
width: 190rpx;
height: 170rpx;
float: left;
}
.btn {
position: absolute;
width: 120rpx;
height: 60rpx;
background: linear-gradient(90deg, #6691fb 0%, #6ad3fe 100%);
color: #fff;
border-radius: 6px;
text-align: center;
line-height: 60rpx;
bottom: 20rpx;
right: 20rpx;
}
@keyframes blinking {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.blink {
position: absolute;
top: 40rpx;
right: 20rpx;
animation: blinking 1s infinite;
}
.bottom-box {
position: fixed;
bottom: 100rpx;
right: 0;
left: 0;
margin: auto;
background: #fff;
width: 255rpx;
height: 85rpx;
padding: 5rpx;
z-index: 99;
background: linear-gradient(90deg, #FFF0F5 0%, #BCD2EE 100%);
border-radius: 80rpx;
overflow: hidden;
.bottom-img {
width: 60rpx;
height: 60rpx;
background-size: 100%;
margin: 10rpx;
float: left;
position: absolute;
top: 0;
bottom: 0;
}
}
.btn-x {
width: 2px;
height: 40rpx;
background: #fff;
border-radius: 2rpx;
position: absolute;
top: 40rpx;
left: 59rpx;
}
.btn-y {
width: 40rpx;
height: 2px;
background: #fff;
border-radius: 2rpx;
position: absolute;
top: 59rpx;
left: 40rpx;
}
.prompt {
background: #fff;
width: 95%;
height: auto;
border-radius: 10px;
margin: -150rpx auto 0;
display: block;
overflow: hidden;
}
.prompt-title {
position: relative;
width: 300rpx;
margin: 40rpx 40rpx 20rpx 40rpx;
}
.prompt-title-text {
display: flex;
flex-direction: column;
color: #777;
font-size: 26rpx;
width: 90%;
margin: 0 auto;
line-height: 40rpx;
}
.img {
width: 23%;
margin-left: 1.5%;
height: 178rpx;
border: 1px solid #eee;
padding: 5px;
float: left;
border-radius: 10px;
image {
width: 100%;
height: 100%;
}
}
.prompt-title-img {
width: 93%;
height: 185rpx;
margin: 20rpx auto;
}
.content-list-img {
position: relative;
width: 360rpx;
margin-left: 1.5%;
height: 400rpx;
border: 1px solid #eee;
background: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 40rpx;
image {
width: 360rpx;
height: 80%;
padding: 10px;
}
}
.uni-easyinput {
width: 100%;
height: 20%;
font-size: 36rpx;
line-height: 40rpx;
background: #F8FAFF;
text-align: center;
display: block;
border: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.del-icon {
width: 50rpx;
height: 50rpx;
position: absolute;
top: 0;
right: 0;
}
.icon-upload {
position: absolute;
top: 0;
left: 190rpx;
height: 100%;
uni-icons {
float: left;
}
}
.title-line {
width: 70px;
height: 7px;
position: absolute;
bottom: 30rpx;
left: 30rpx;
background: rgba(0, 191, 255, 0.5);
}
.bottom-btn {
width: 100%;
height: 80rpx;
padding-left: 100rpx;
color: #777;
line-height: 80rpx;
font-weight: bold;
position: absolute;
top: 0;
bottom: 40rpx;
font-size: 34rpx;
}
.run-line {
width: 200px;
height: 200px;
-webkit-animation: rotate2 2s linear infinite;
animation: rotate2 3s linear infinite;
-webkit-transform-origin: 50% 50%;
z-index: -2;
margin: -50% 0 0 -50%;
background: linear-gradient(90deg, #FFF0F5 0%, #BCD2EE 100%);
}
@keyframes rotate2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.popup-photo {
height: 110rpx;
line-height: 110rpx;
text-align: center;
font-size: 36rpx;
font-weight: 800;
border-bottom: 1px solid #eee;
}
.popup-pay-content {
align-items: center;
justify-content: center;
// padding: 15px;
width: 100%;
height: 1300rpx;
max-height: 1300rpx;
// overflow: scroll;
overflow: hidden;
background-color: #fff;
}
.popup-pay-title {
font-size: 30rpx;
font-weight: bold;
text-align: center;
position: relative;
border-bottom: 1px solid #eee;
padding-bottom: 20rpx;
}
.popup-pay-container {
margin: 40rpx auto 0;
height: 100rpx;
border-radius: 10px;
background: #088FEB;
line-height: 100rpx;
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
color: #fff;
width: 90%;
}
.checked {
background: #60F3FF;
color: #fff !important;
}
.content-fur {
border-bottom: 1px solid #eee;
display: flex;
line-height: 50rpx;
padding: 20rpx;
}
.content-low {
width: auto;
border: 1px solid #eee;
display: inline-block;
min-width: 90rpx;
padding: 5rpx;
font-size: 35rpx;
text-align: center;
color: #777;
margin: 20rpx 0 0 20rpx;
}
.popup-pay-shili {
height: 750rpx;
margin-top: 550rpx;
z-index: 99;
background: #fff;
border-top: 1px solid #eee;
}
@media screen and (min-width: 470px) {
/* 适配宽度为375px及以上的屏幕 */
.popup-pay-content {
height: 1000rpx;
}
.popup-pay-shili{
height: 750rpx;
margin-top: 260rpx;
z-index: 99;
background: #fff;
border-top: 1px solid #eee;
}
}
</style>