Skip to content

html / h5wandahuijia

Go to a project
Commit b72c0328 by mamingqun
Options

添加上传提示

parent c1d947ad
Showing with 703 additions and 662 deletions
dist.zip deleted 100644 → 0
File deleted
src/pages/index/ImgUp.vue
<template>
<section class="imgUp">
<div class="wrapBox">
<div class="shangchuang">
<div class="title">
<div class="iconBox icon1"></div>
<div class="text">上传照片</div>
</div>
<div class="upLoad">
<div class="list-default-img" @click.stop="addPic" v-show="isPhoto">
<img src="./assets/images/icon_photo.png">
<p>上传一张美美的照片</p>
<p>优质的照片让夺冠更为轻松</p>
<input
type="file"
id="text"
accept="image/jpeg, image/jpg, image/png"
@change="onFileChange"
capture="camera"
style="display: none;"
>
</div>
<ul class="list-ul" v-if="isPreivw&&isIos">
<li v-for="(item, index) in testUrl" :key="index">
<img :src="item" alt>
</li>
<x-icon
v-if="isPreivw"
@click="delImage"
type="ios-close"
class="closeIcon"
size="30"
icon-success-color="red"
></x-icon>
</ul>
<ul class="list-ul" v-if="isPreivw&&!isIos">
<li v-for="(item, index) in imgUrls" :key="index">
<img :src="item" alt>
</li>
<x-icon
v-if="isPreivw"
@click="delImage"
type="ios-close"
class="closeIcon"
size="30"
icon-success-color="red"
></x-icon>
</ul>
</div>
</div>
<!-- <div class="pictureType">
<section class="imgUp">
<div class="wrapBox">
<div class="shangchuang">
<div class="title">
<div class="iconBox icon1"></div>
<div class="text">上传照片</div>
</div>
<div class="upLoad">
<div class="list-default-img" @click.stop="addPicTemp" v-show="isPhoto">
<img src="./assets/images/icon_photo.png">
<p>上传一张美美的照片</p>
<p>优质的照片让夺冠更为轻松</p>
<input
type="file"
id="text"
accept="image/jpeg, image/jpg, image/png"
@change="onFileChange"
capture="camera"
style="display: none;"
>
</div>
<ul class="list-ul" v-if="isPreivw&&isIos">
<li v-for="(item, index) in testUrl" :key="index">
<img :src="item" alt>
</li>
<x-icon
v-if="isPreivw"
@click="delImage"
type="ios-close"
class="closeIcon"
size="30"
icon-success-color="red"
></x-icon>
</ul>
<ul class="list-ul" v-if="isPreivw&&!isIos">
<li v-for="(item, index) in imgUrls" :key="index">
<img :src="item" alt>
</li>
<x-icon
v-if="isPreivw"
@click="delImage"
type="ios-close"
class="closeIcon"
size="30"
icon-success-color="red"
></x-icon>
</ul>
</div>
</div>
<!-- <div class="pictureType">
<div class="title">
<div class="iconBox icon2"></div>
<div class="text">选择照片类型</div>
......@@ -88,42 +88,42 @@
<label for="qita" :class="[activeIndex ===5?'active':'']">其他类</label>
</div>
</div>
</div>-->
<div class="miaoshu">
<div class="title1">
<div class="iconBox icon3"></div>
<!-- <div class="text">添加内容描述</div> -->
<div class="text">作品标题</div>
</div>
<group>
<x-textarea
v-model="desc"
placeholder="给您的作品起个好听的名字..."
:show-counter="true"
@on-blur="goBottom"
:max="10"
:rows="1"
></x-textarea>
</group>
</div>
<div class="miaoshu marginTop20">
<div class="title1">
<div class="iconBox icon3"></div>
<!-- <div class="text">添加内容描述</div> -->
<div class="text">作品描述</div>
</div>
<group>
<x-textarea
v-model="memo"
placeholder="请务必注明被拍摄者姓名以及所在地..."
:show-counter="true"
@on-blur="goBottom"
:max="30"
:rows="2"
></x-textarea>
</group>
</div>
<!-- <div class="miaoshu marginTop20">
</div>-->
<div class="miaoshu">
<div class="title1">
<div class="iconBox icon3"></div>
<!-- <div class="text">添加内容描述</div> -->
<div class="text">作品标题</div>
</div>
<group>
<x-textarea
v-model="desc"
placeholder="给您的作品起个好听的名字..."
:show-counter="true"
@on-blur="goBottom"
:max="10"
:rows="1"
></x-textarea>
</group>
</div>
<div class="miaoshu marginTop20">
<div class="title1">
<div class="iconBox icon3"></div>
<!-- <div class="text">添加内容描述</div> -->
<div class="text">作品描述</div>
</div>
<group>
<x-textarea
v-model="memo"
placeholder="请务必注明被拍摄者姓名以及所在地..."
:show-counter="true"
@on-blur="goBottom"
:max="30"
:rows="2"
></x-textarea>
</group>
</div>
<!-- <div class="miaoshu marginTop20">
<div class="title1">
<div class="iconBox icon3"></div>
<div class="text">作品拍摄地</div>
......@@ -138,8 +138,8 @@
:rows="2"
></x-textarea>
</group>
</div>-->
<!-- <div class="pictureTime marginTop30">
</div>-->
<!-- <div class="pictureTime marginTop30">
<div @click="openPicker" class="pictureTime"><span>拍摄时间</span> <span class='time'>{{pictureTime}}</span></div>
<DatetimePicker
ref="picker"
......@@ -150,12 +150,17 @@
date-format="{value}"
hourFormat="{value}"
></DatetimePicker>
</div>-->
<div class="fabu" @click="fabu">
<a href="#">发布作品</a>
</div>
</div>-->
<div class="fabu" @click="fabu">
<a href="#">发布作品</a>
</div>
<div class="photo-tip-wrap" v-if="photoTipOn">
<div class="photo-tip">
<div class="close" @click="addPic"></div>
</div>
</section>
</div>
</div>
</section>
</template>
<script>
......@@ -170,409 +175,413 @@ import wx from 'weixin-js-sdk';
import api from '@/modules/js/api.js';
export default {
data() {
return {
pictureType: '1',
activeIndex: 1,
imgUrls: [],
base64: [],
testUrl: [],
isPhoto: true,
big_image: '',
small_image: '',
resizeLock: true,
isIos: null,
isPreivw: false,
fabuLock: true,
//作品标题
desc: '',
// 作品描述
memo: '',
// 拍摄地
image_address: '',
// 拍摄时间
image_time: ''
};
},
computed: {
pictureTime() {
if (this.image_time) {
var myDate = new Date(this.image_time);
var year = myDate.getFullYear() + '年';
var month = myDate.getMonth() + 1 + '月';
var date = myDate.getDate() + '日';
var hour = myDate.getHours() + '时';
return year + month + date + hour;
} else {
data() {
return {
pictureType: '1',
activeIndex: 1,
imgUrls: [],
base64: [],
testUrl: [],
isPhoto: true,
big_image: '',
small_image: '',
resizeLock: true,
isIos: null,
isPreivw: false,
fabuLock: true,
//作品标题
desc: '',
// 作品描述
memo: '',
// 拍摄地
image_address: '',
// 拍摄时间
image_time: '',
photoTipOn: false
};
},
computed: {
pictureTime() {
if (this.image_time) {
var myDate = new Date(this.image_time);
var year = myDate.getFullYear() + '年';
var month = myDate.getMonth() + 1 + '月';
var date = myDate.getDate() + '日';
var hour = myDate.getHours() + '时';
return year + month + date + hour;
} else {
}
}
}
},
mounted() {
window.onresize = () => {
// // 处理安卓键盘问题
// if (this.resizeLock) {
// $('.fabu').css({ position: 'static' });
// this.resizeLock = !this.resizeLock;
// } else {
// $('.fabu').css({ position: 'absolute' });
// this.resizeLock = !this.resizeLock;
// // alert(123123);
// $(window).scrollTop(0);
// }
};
this.getWeixinPower();
this.preventPickerDefaultIOs();
},
activated() {
this.deleteAll();
}
},
mounted() {
window.onresize = () => {
// // 处理安卓键盘问题
// if (this.resizeLock) {
// $('.fabu').css({ position: 'static' });
// this.resizeLock = !this.resizeLock;
// } else {
// $('.fabu').css({ position: 'absolute' });
// this.resizeLock = !this.resizeLock;
// // alert(123123);
// $(window).scrollTop(0);
// }
};
this.getWeixinPower();
this.preventPickerDefaultIOs();
},
activated() {
this.deleteAll();
},
created() {
var vm = this;
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
// alert("iphone");
vm.isIos = true;
} else if (/android/.test(ua)) {
// alert('android');
vm.isIos = false;
}
},
methods: {
changeRadioIndex(num) {
var num = Number(num);
this.activeIndex = num;
},
created() {
var vm = this;
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
// alert("iphone");
vm.isIos = true;
} else if (/android/.test(ua)) {
// alert('android');
vm.isIos = false;
}
addPicTemp() {
this.photoTipOn = true
},
methods: {
changeRadioIndex(num) {
var num = Number(num);
this.activeIndex = num;
},
addPic() {
let vm = this;
// document.getElementById('text').click();
wx.ready(() => {
wx.chooseImage({
count: 1, // 默认9
// sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
vm.imgUrls = res.localIds;
wx.getLocalImgData({
localId: vm.imgUrls[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');
vm.testUrl.push(localData);
var reg = /data:image/g;
if (!reg.test(localData)) {
vm.base64.push(localData);
} else {
var localData = localData.split(',')[1];
vm.base64.push(localData);
}
vm.isPhoto = false;
vm.isPreivw = true;
}
});
wx.uploadImage({
localId: vm.imgUrls[0], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
axios
.get('/contest/wx/upload', {
params: { media_id: serverId }
})
.then(res => {
console.log('发给服务serverid');
console.log(res);
if (res.data.code === 0) {
vm.small_image =
res.data.data.small_image;
vm.big_image =
res.data.data.big_image;
}
})
.catch(error => {
console.log('发给服务serverid的错误');
console.log(error);
Toast({
message: error.response.data.msg
});
});
}
});
}
});
});
return false;
},
onFileChange: function (e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
// this.createImage(files, e);
},
createImage(file, e) {
let vm = this;
lrz(file[0], { quality: 0.6 })
.then(function (rst) {
vm.imgUrls.push(rst.base64);
vm.isPhoto = false;
vm.upImg();
return rst;
})
.always(function () {
// 清空文件上传控件的值
e.target.value = null;
});
},
delImage() {
let vm = this;
MessageBox.confirm('您确定删除照片?', '')
.then(action => {
this.deleteAll();
})
.catch(err => { });
},
deleteAll() {
var vm = this;
vm.imgUrls.splice(0, 1);
vm.base64.splice(0, 1);
vm.testUrl.splice(0, 1);
vm.isPreivw = false;
this.small_image = '';
this.big_image = '';
vm.isPhoto = true;
},
upImg() {
if (!this.imgUrls.length) return;
axios
.post('/upload/file', {
project: 'contest',
content: this.base64[0]
})
.then(res => {
if (res.data.code === 0) {
this.small_image = res.data.data.small_image;
this.big_image = res.data.data.big_image;
}
})
.catch(err => {
console.log(err);
Toast({ message: err.response.data.msg });
// alert('上传图片失败');
});
},
fabu() {
console.log('this.big_image');
console.log(this.big_image);
if (this.fabuLock) {
this.fabuLock = false;
setTimeout(() => {
this.fabuLock = true;
}, 2000);
if (!this.big_image) {
Toast({
message: '请选择要发布的照片'
});
return;
addPic() {
let vm = this;
// document.getElementById('text').click();
wx.ready(() => {
wx.chooseImage({
count: 1, // 默认9
// sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
vm.imgUrls = res.localIds;
wx.getLocalImgData({
localId: vm.imgUrls[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');
vm.testUrl.push(localData);
var reg = /data:image/g;
if (!reg.test(localData)) {
vm.base64.push(localData);
} else {
var localData = localData.split(',')[1];
vm.base64.push(localData);
}
if (!this.desc.trim()) {
Toast({
message: '请输入作品的标题'
});
return;
}
vm.isPhoto = false;
vm.isPreivw = true;
if (!this.memo.trim()) {
Toast({
message: '请输入作品的描述'
});
return;
}
}
});
// if (!this.image_address.trim()) {
// Toast({
// message: '请输入作品的拍摄地'
// });
// return;
// }
// if (!this.pictureTime) {
// Toast({
// message: '请输入作品的拍摄时间'
// });
// return;
// }
wx.uploadImage({
localId: vm.imgUrls[0], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
axios
.post('/contest/join', {
big_image: this.big_image,
type: this.pictureType,
desc: this.desc,
small_image: this.small_image,
memo: this.memo,
image_address: this.image_address,
image_time: this.pictureTime
})
.then(res => {
if (res.data.code === 0) {
Toast({
message: '发布成功'
});
setTimeout(() => {
var ua = navigator.userAgent.toLowerCase();
var isWeixin =
ua.indexOf('micromessenger') != -1;
if (isWeixin) {
// window.location.href = window.windowUserCenterHref;
window.location.href = window.windowIndexHref;
} else {
window.location.href =
location.origin + '/user.html';
}
}, 800);
} else {
Toast({
message: '发布失败'
});
}
}).catch((error) => {
// this.fabuLock = true;
console.log('发布错误');
console.log(error);
console.log(error.response.data.msg);
Toast({ message: error.response.data.msg });
})
}
},
getWeixinPower() {
axios
.get('/contest/wechat/info', {
params: {
url: encodeURIComponent(location.href.split('#')[0]),
type: 1
}
})
.then(res => {
var res = res.data.data;
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: [
'chooseImage',
'getLocalImgData',
'uploadImage',
'downloadImage'
]
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ['chooseImage', 'getLocalImgData'],
success: function (res) {
// console.log('检查接口');
// console.log(res);
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
wx.error(function (res) {
// console.log('微信错误');
// console.log(res);
});
});
},
goBottom() {
// alert(456789);
$(window).scrollTop(0);
},
openPicker() {
this.$refs.picker.open();
},
preventPickerDefaultIOs() {
document.getElementsByClassName('mint-datetime')[0].addEventListener('touchmove', function (e) {
// console.log(123);
e.preventDefault();
})
},
uploadPicture() {
var vm = this;
axios.post('/contest/base/upload', {
content: this.base64[0]
}).then(res => {
if (res.data.code === 0) {
vm.small_image =
.get('/contest/wx/upload', {
params: { media_id: serverId }
})
.then(res => {
console.log('发给服务serverid');
console.log(res);
if (res.data.code === 0) {
vm.small_image =
res.data.data.small_image;
vm.big_image =
vm.big_image =
res.data.data.big_image;
}
})
.catch(error => {
}
})
.catch(error => {
console.log('发给服务serverid的错误');
console.log(error);
Toast({
message: error.response.data.msg
message: error.response.data.msg
});
});
});
}
});
}
});
});
return false;
},
onFileChange: function (e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
// this.createImage(files, e);
},
createImage(file, e) {
let vm = this;
lrz(file[0], { quality: 0.6 })
.then(function (rst) {
vm.imgUrls.push(rst.base64);
vm.isPhoto = false;
vm.upImg();
return rst;
})
.always(function () {
// 清空文件上传控件的值
e.target.value = null;
});
},
delImage() {
let vm = this;
MessageBox.confirm('您确定删除照片?', '')
.then(action => {
this.deleteAll();
})
.catch(err => { });
},
deleteAll() {
var vm = this;
vm.imgUrls.splice(0, 1);
vm.base64.splice(0, 1);
vm.testUrl.splice(0, 1);
vm.isPreivw = false;
this.small_image = '';
this.big_image = '';
vm.isPhoto = true;
},
upImg() {
if (!this.imgUrls.length) return;
axios
.post('/upload/file', {
project: 'contest',
content: this.base64[0]
})
.then(res => {
if (res.data.code === 0) {
this.small_image = res.data.data.small_image;
this.big_image = res.data.data.big_image;
}
})
.catch(err => {
console.log(err);
Toast({ message: err.response.data.msg });
// alert('上传图片失败');
});
},
fabu() {
console.log('this.big_image');
console.log(this.big_image);
if (this.fabuLock) {
this.fabuLock = false;
setTimeout(() => {
this.fabuLock = true;
}, 2000);
if (!this.big_image) {
Toast({
message: '请选择要发布的照片'
});
return;
}
if (!this.desc.trim()) {
Toast({
message: '请输入作品的标题'
});
return;
}
if (!this.memo.trim()) {
Toast({
message: '请输入作品的描述'
});
return;
}
// if (!this.image_address.trim()) {
// Toast({
// message: '请输入作品的拍摄地'
// });
// return;
// }
// if (!this.pictureTime) {
// Toast({
// message: '请输入作品的拍摄时间'
// });
// return;
// }
axios
.post('/contest/join', {
big_image: this.big_image,
type: this.pictureType,
desc: this.desc,
small_image: this.small_image,
memo: this.memo,
image_address: this.image_address,
image_time: this.pictureTime
})
.then(res => {
if (res.data.code === 0) {
Toast({
message: '发布成功'
});
setTimeout(() => {
var ua = navigator.userAgent.toLowerCase();
var isWeixin =
ua.indexOf('micromessenger') != -1;
if (isWeixin) {
// window.location.href = window.windowUserCenterHref;
window.location.href = window.windowIndexHref;
} else {
window.location.href =
location.origin + '/user.html';
}
}, 800);
} else {
Toast({
message: '发布失败'
});
}
}).catch((error) => {
// this.fabuLock = true;
console.log('发布错误');
console.log(error);
console.log(error.response.data.msg);
Toast({ message: error.response.data.msg });
})
}
},
getWeixinPower() {
axios
.get('/contest/wechat/info', {
params: {
url: encodeURIComponent(location.href.split('#')[0]),
type: 1
}
})
.then(res => {
var res = res.data.data;
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: [
'chooseImage',
'getLocalImgData',
'uploadImage',
'downloadImage'
]
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ['chooseImage', 'getLocalImgData'],
success: function (res) {
// console.log('检查接口');
// console.log(res);
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
wx.error(function (res) {
// console.log('微信错误');
// console.log(res);
});
});
},
components: {
XTextarea,
Group,
Datetime,
DatetimePicker
goBottom() {
// alert(456789);
$(window).scrollTop(0);
},
beforeRouteLeave(to, from, next) {
this.deleteAll();
next();
openPicker() {
this.$refs.picker.open();
},
preventPickerDefaultIOs() {
document.getElementsByClassName('mint-datetime')[0].addEventListener('touchmove', function (e) {
// console.log(123);
e.preventDefault();
})
},
uploadPicture() {
var vm = this;
axios.post('/contest/base/upload', {
content: this.base64[0]
}).then(res => {
if (res.data.code === 0) {
vm.small_image =
res.data.data.small_image;
vm.big_image =
res.data.data.big_image;
}
})
.catch(error => {
console.log('发给服务serverid的错误');
console.log(error);
Toast({
message: error.response.data.msg
});
});
}
},
components: {
XTextarea,
Group,
Datetime,
DatetimePicker
},
beforeRouteLeave(to, from, next) {
this.deleteAll();
next();
}
};
</script>
<style lang="less" >
html,
body {
// background: red;
// background: red;
}
.bottomView {
img {
width: 100%;
height: auto;
}
img {
width: 100%;
height: auto;
}
}
.marginTop20 {
margin-top: 10px;
margin-top: 10px;
}
.marginTop30 {
margin-top: 40px;
margin-top: 40px;
}
// .scroller-item {
......@@ -582,239 +591,271 @@ body {
// }
.imgUp {
// background: green;
height: 100%;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 20px;
padding-right: 20px;
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.pictureTime {
background: #f5f5f5;
font-size: 30px;
height: 50px;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
.time {
float: right;
}
// background: green;
height: 100%;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 20px;
padding-right: 20px;
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.pictureTime {
background: #f5f5f5;
font-size: 30px;
height: 50px;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
.time {
float: right;
}
}
.wrapBox {
overflow-y: auto;
}
.title {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: content-box;
padding-top: 20px;
padding-bottom: 20px;
.iconBox {
width: 31px;
height: 31px;
margin-left: 5px;
}
.wrapBox {
overflow-y: auto;
.text {
font-size: 32px;
color: black;
margin-left: 11px;
height: 32px;
line-height: 32px;
}
.title {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: content-box;
padding-top: 20px;
padding-bottom: 20px;
.iconBox {
width: 31px;
height: 31px;
margin-left: 5px;
}
.icon1 {
background: url("~@/pages/index/assets/images/01.png") no-repeat;
background-size: 100% auto;
}
.text {
font-size: 32px;
color: black;
margin-left: 11px;
height: 32px;
line-height: 32px;
}
.icon2 {
background: url("~@/pages/index/assets/images/02.png") no-repeat;
background-size: 100% auto;
}
.icon1 {
background: url("~@/pages/index/assets/images/01.png") no-repeat;
background-size: 100% auto;
}
.icon3 {
background: url("~@/pages/index/assets/images/03.png") no-repeat;
background-size: 100% auto;
}
}
.title1 {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: content-box;
padding-top: 20px;
// padding-bottom: 5px;
.iconBox {
width: 31px;
height: 31px;
margin-left: 5px;
}
.icon2 {
background: url("~@/pages/index/assets/images/02.png") no-repeat;
background-size: 100% auto;
}
.text {
font-size: 32px;
color: black;
margin-left: 11px;
height: 32px;
line-height: 32px;
}
.icon3 {
background: url("~@/pages/index/assets/images/03.png") no-repeat;
background-size: 100% auto;
}
.icon1 {
background: url("~@/pages/index/assets/images/01.png") no-repeat;
background-size: 100% auto;
}
.title1 {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: content-box;
padding-top: 20px;
// padding-bottom: 5px;
.iconBox {
width: 31px;
height: 31px;
margin-left: 5px;
}
.icon2 {
background: url("~@/pages/index/assets/images/02.png") no-repeat;
background-size: 100% auto;
}
.text {
font-size: 32px;
color: black;
margin-left: 11px;
height: 32px;
line-height: 32px;
}
.icon3 {
background: url("~@/pages/index/assets/images/03.png") no-repeat;
background-size: 100% auto;
}
}
.icon1 {
background: url("~@/pages/index/assets/images/01.png") no-repeat;
background-size: 100% auto;
}
.shangchuang {
margin-top: 8px;
margin-bottom: 30px;
.icon2 {
background: url("~@/pages/index/assets/images/02.png") no-repeat;
background-size: 100% auto;
.upLoad {
height: 300px;
background: #f5f5f5;
.list-default-img {
width: 100%;
height: 100%;
padding: 1px;
p {
text-align: center;
font-size: 30px;
color: #999999;
}
.icon3 {
background: url("~@/pages/index/assets/images/03.png") no-repeat;
background-size: 100% auto;
img {
display: block;
width: 48px;
height: 48px;
margin: 100px auto 20px;
}
}
}
.shangchuang {
margin-top: 8px;
margin-bottom: 30px;
.upLoad {
height: 300px;
background: #f5f5f5;
.list-default-img {
width: 100%;
height: 100%;
padding: 1px;
p {
text-align: center;
font-size: 30px;
color: #999999;
}
img {
display: block;
width: 48px;
height: 48px;
margin: 100px auto 20px;
}
}
.list-ul {
width: 100%;
height: 100%;
background: #f5f5f5;
position: relative;
.list-ul {
width: 100%;
height: 100%;
background: #f5f5f5;
position: relative;
li {
width: 100%;
height: 100%;
overflow-x: scroll;
}
li {
width: 100%;
height: 100%;
overflow-x: scroll;
}
img {
height: 100%;
display: block;
margin: 0 auto;
}
img {
height: 100%;
display: block;
margin: 0 auto;
}
.closeIcon {
position: absolute;
top: -13px;
right: -7px;
}
.closeIcon {
position: absolute;
top: -13px;
right: -7px;
}
.icon-success-color {
color: #2358a7;
}
}
.icon-success-color {
color: #2358a7;
}
}
}
}
.pictureType {
margin-bottom: 60px;
.radioBox {
display: flex;
flex-direction: row;
justify-content: space-around;
.pictureType {
margin-bottom: 60px;
.radioBox {
display: flex;
flex-direction: row;
justify-content: space-around;
.active {
color: #2156a5;
}
.active {
color: #2156a5;
}
.radioSubBox {
display: flex;
flex-basis: row;
align-items: center;
margin-left: 0px;
margin-top: 20px;
label {
font-size: 28px;
margin-left: 5px;
}
}
.radioSubBox {
display: flex;
flex-basis: row;
align-items: center;
margin-left: 0px;
margin-top: 20px;
label {
font-size: 28px;
margin-left: 5px;
}
}
}
}
.miaoshu {
.weui-textarea {
font-size: 34px;
}
textarea::-webkit-input-placeholder {
color: #aab2bd;
font-size: 30px;
text-align: left;
}
.weui-cell__bd {
background: #f5f5f5;
}
.vux-x-textarea {
background: #f5f5f5;
}
textarea {
background: #f5f5f5;
}
.miaoshu {
.weui-textarea {
font-size: 34px;
}
textarea::-webkit-input-placeholder {
color: #aab2bd;
font-size: 30px;
text-align: left;
}
.weui-cell__bd {
background: #f5f5f5;
}
.vux-x-textarea {
background: #f5f5f5;
}
textarea {
background: #f5f5f5;
}
}
.fabu {
width: 100%;
height: 90px;
line-height: 90px;
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
background: #2358a7;
text-align: center;
margin-top: 20px;
a {
display: block;
width: 100%;
height: 100%;
color: white;
font-size: 35px;
}
}
.fabu {
width: 100%;
height: 90px;
line-height: 90px;
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
background: #2358a7;
text-align: center;
margin-top: 20px;
a {
display: block;
width: 100%;
height: 100%;
color: white;
font-size: 35px;
}
.pictureTime {
.vux-datetime {
background: #f5f5f5;
font-size: 30px;
}
}
.pictureTime {
.vux-datetime {
background: #f5f5f5;
font-size: 30px;
}
.photo-tip-wrap {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
.photo-tip {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
// border: 1px solid black;
width: 600px;
height: 730px;
background: url("~@/pages/index/assets/images/new/newbg.png") no-repeat;
background-size: 100% auto;
.close {
width: 200px;
height: 60px;
background: url("~@/pages/index/assets/images/new/wzd.png") no-repeat;
background-size: 100% auto;
position: absolute;
left: 50%;
bottom: 30px;
transform: translate(-50%, 0);
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment