|
|
|
|
@ -1,29 +1,121 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="accountsetting-container">
|
|
|
|
|
<a-modal
|
|
|
|
|
v-model="visible"
|
|
|
|
|
title="设置图标"
|
|
|
|
|
@cancel="modalcancel"
|
|
|
|
|
on-ok="handleOk"
|
|
|
|
|
>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="cropper-content">
|
|
|
|
|
<div class="cropper-box">
|
|
|
|
|
<div class="cropper">
|
|
|
|
|
<vue-cropper
|
|
|
|
|
ref="cropper"
|
|
|
|
|
:img="option.img"
|
|
|
|
|
:outputSize="option.outputSize"
|
|
|
|
|
:outputType="option.outputType"
|
|
|
|
|
:info="option.info"
|
|
|
|
|
:canScale="option.canScale"
|
|
|
|
|
:autoCrop="option.autoCrop"
|
|
|
|
|
:autoCropWidth="option.autoCropWidth"
|
|
|
|
|
:autoCropHeight="option.autoCropHeight"
|
|
|
|
|
:fixed="option.fixed"
|
|
|
|
|
:fixedNumber="option.fixedNumber"
|
|
|
|
|
:canMoveBox="option.canMoveBox"
|
|
|
|
|
:height="option.height"
|
|
|
|
|
:infoTrue="option.infoTrue"
|
|
|
|
|
:maxImgSize="option.maxImgSize"
|
|
|
|
|
:enlarge="option.enlarge"
|
|
|
|
|
:mode="option.mode"
|
|
|
|
|
@realTime="realTime"
|
|
|
|
|
>
|
|
|
|
|
</vue-cropper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="previewcontainer">
|
|
|
|
|
<!-- 图标预览框 -->
|
|
|
|
|
<p>预览</p>
|
|
|
|
|
<div :style="previewStyle3" class="show-preview">
|
|
|
|
|
<div :style="previews.div" class="preview">
|
|
|
|
|
<img :src="previews.url" :style="previews.img" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btncontainer">
|
|
|
|
|
<!-- <a-button @click="restaricon">重置</a-button> -->
|
|
|
|
|
<a-button @click="changeavatar">确定</a-button>
|
|
|
|
|
<a-button @click="modalcancel">取消</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<template slot="footer">
|
|
|
|
|
{{ }}
|
|
|
|
|
</template>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<div class="accountcontent w">
|
|
|
|
|
<div class="accountSetList">
|
|
|
|
|
<div class="userinfobox">
|
|
|
|
|
<div class="avatarbox">
|
|
|
|
|
<i class="iconfont icon-morentouxiang"></i>
|
|
|
|
|
<i
|
|
|
|
|
class="iconfont icon-morentouxiang"
|
|
|
|
|
@click="uploadavatar"
|
|
|
|
|
style="cursor: pointer"
|
|
|
|
|
>
|
|
|
|
|
<div class="mask"><div>修改头像</div></div></i
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="file"
|
|
|
|
|
ref="updateicon"
|
|
|
|
|
@change="filepick($event)"
|
|
|
|
|
style="display: none"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="username" v-if="userinfo.userName">
|
|
|
|
|
Hi,{{ userinfo.userName }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="username" v-else>Hi,{{ userinfo.hidetel }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="priceinfo">
|
|
|
|
|
<ul>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/accountsetting/myintegral')"
|
|
|
|
|
:class="{ tagactive: activelist === 6 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-jifen"></i>我的积分</span
|
|
|
|
|
><span
|
|
|
|
|
><span>{{ userpoint >= 0 ? userpoint : "--" }}分</span
|
|
|
|
|
><i class="iconfont icon-youjiantou"></i
|
|
|
|
|
></span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/accountsetting/mycard')"
|
|
|
|
|
:class="{ tagactive: activelist === 7 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-kaquan"></i>我的卡券</span
|
|
|
|
|
><span
|
|
|
|
|
><span
|
|
|
|
|
>{{
|
|
|
|
|
cardinfo.recordCount ? cardinfo.recordCount : "0"
|
|
|
|
|
}}张</span
|
|
|
|
|
><i class="iconfont icon-youjiantou"></i
|
|
|
|
|
></span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/accountsetting/mybalance')"
|
|
|
|
|
:class="{ tagactive: activelist === 8 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-yue"></i>我的余额</span
|
|
|
|
|
><span
|
|
|
|
|
><span>{{ userbalance >= 0 ? userbalance : "0" }}元</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i
|
|
|
|
|
></span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/userinfo/accountsetting/loginpsw')"
|
|
|
|
|
:class="{ tagactive: activelist === 0 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
|
|
|
|
|
><span
|
|
|
|
|
><span>已设置</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/userinfo/accountsetting/boundtel')"
|
|
|
|
|
@click="pushto('/accountsetting/boundtel')"
|
|
|
|
|
:class="{ tagactive: activelist === 1 }"
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
@ -35,7 +127,7 @@
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/userinfo/accountsetting/boundwx')"
|
|
|
|
|
@click="pushto('/accountsetting/boundwx')"
|
|
|
|
|
:class="{ tagactive: activelist === 2 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-weixin1"></i>绑定微信</span
|
|
|
|
|
@ -45,7 +137,7 @@
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/userinfo/accountsetting/boundbankcard')"
|
|
|
|
|
@click="pushto('/accountsetting/boundbankcard')"
|
|
|
|
|
:class="{ tagactive: activelist === 3 }"
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
@ -58,7 +150,17 @@
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/userinfo/accountsetting/realname')"
|
|
|
|
|
@click="pushto('/accountsetting/loginpsw')"
|
|
|
|
|
:class="{ tagactive: activelist === 0 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
|
|
|
|
|
><span
|
|
|
|
|
><span>已设置</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pushto('/accountsetting/realname')"
|
|
|
|
|
:class="{ tagactive: activelist === 4 }"
|
|
|
|
|
>
|
|
|
|
|
<span><i class="iconfont icon-shimingrenzheng"></i>实名认证</span
|
|
|
|
|
@ -74,6 +176,8 @@
|
|
|
|
|
<router-view
|
|
|
|
|
:userinfo="userinfo"
|
|
|
|
|
:userbanklist="userbanklist"
|
|
|
|
|
:userpoint="userpoint"
|
|
|
|
|
:userbalance="userbalance"
|
|
|
|
|
></router-view>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -81,21 +185,59 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { userBaseInfoApi, getUserBankListApi } from "../../../api/userinfo";
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
userBaseInfoApi,
|
|
|
|
|
getUserBankListApi,
|
|
|
|
|
userBalanceApi,
|
|
|
|
|
getPointApi,
|
|
|
|
|
userCardApi,
|
|
|
|
|
} from "../../../api/userinfo";
|
|
|
|
|
import { VueCropper } from "vue-cropper";
|
|
|
|
|
export default {
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: "",
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
components: {},
|
|
|
|
|
components: {
|
|
|
|
|
VueCropper,
|
|
|
|
|
},
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
props: {},
|
|
|
|
|
// 组件状态值
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
userinfo: {}, // 用户基础信息
|
|
|
|
|
userbalance: "",
|
|
|
|
|
userpoint: "",
|
|
|
|
|
activelist: "",
|
|
|
|
|
userbanklist: [],
|
|
|
|
|
cardinfo: {},
|
|
|
|
|
visible: false,
|
|
|
|
|
previewStyle3: {},
|
|
|
|
|
previews: {},
|
|
|
|
|
option: {
|
|
|
|
|
// 裁剪图片配置
|
|
|
|
|
img: "", // 裁剪图片的地址
|
|
|
|
|
outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
|
|
|
|
|
outputType: "jpeg", // 裁剪生成图片的格式（jpeg || png || webp）
|
|
|
|
|
info: true, // 图片大小信息
|
|
|
|
|
canScale: true, // 图片是否允许滚轮缩放
|
|
|
|
|
autoCrop: true, // 是否默认生成截图框
|
|
|
|
|
autoCropWidth: 150, // 默认生成截图框宽度
|
|
|
|
|
autoCropHeight: 150, // 默认生成截图框高度
|
|
|
|
|
fixed: true, // 是否开启截图框宽高固定比例
|
|
|
|
|
fixedNumber: [1, 1], // 截图框的宽高比例
|
|
|
|
|
// full: false, // false按原比例裁切图片，不失真
|
|
|
|
|
// fixedBox: false, // 固定截图框大小，不允许改变
|
|
|
|
|
// canMove: false, // 上传图片是否可以移动
|
|
|
|
|
canMoveBox: true, // 截图框能否拖动
|
|
|
|
|
// original: false, // 上传图片按照原始比例渲染
|
|
|
|
|
// centerBox: false, // 截图框是否被限制在图片里面
|
|
|
|
|
height: true, // 是否按照设备的dpr 输出等比例图片
|
|
|
|
|
infoTrue: true, // true为展示真实输出图片宽高，false展示看到的截图框宽高
|
|
|
|
|
maxImgSize: 290, // 限制图片最大宽度和高度
|
|
|
|
|
enlarge: 1, // 图片根据截图框输出比例倍数
|
|
|
|
|
mode: "auto", // 图片默认渲染方式
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
@ -118,6 +260,9 @@ export default {
|
|
|
|
|
this.getUserInfo();
|
|
|
|
|
this.changeactive();
|
|
|
|
|
this.getuserbnak();
|
|
|
|
|
this.getUserBalanceInfo();
|
|
|
|
|
this.getPoint();
|
|
|
|
|
this.getcardcount();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
@ -170,6 +315,12 @@ export default {
|
|
|
|
|
this.activelist = 3;
|
|
|
|
|
} else if (this.path.indexOf("/realname") > -1) {
|
|
|
|
|
this.activelist = 4;
|
|
|
|
|
} else if (this.path.indexOf("/myintegral") > -1) {
|
|
|
|
|
this.activelist = 6;
|
|
|
|
|
} else if (this.path.indexOf("/mycard") > -1) {
|
|
|
|
|
this.activelist = 7;
|
|
|
|
|
} else if (this.path.indexOf("/mybalance") > -1) {
|
|
|
|
|
this.activelist = 8;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getuserbnak() {
|
|
|
|
|
@ -186,6 +337,125 @@ export default {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getUserBalanceInfo() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await userBalanceApi();
|
|
|
|
|
this.userbalance = data.data.balance / 100;
|
|
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log(this.userbalance);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getPoint() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await getPointApi();
|
|
|
|
|
console.log(data);
|
|
|
|
|
this.userpoint = data.data.pointTotal;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getcardcount() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await userCardApi();
|
|
|
|
|
console.log(data);
|
|
|
|
|
this.cardinfo = data.data;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
uploadavatar() {
|
|
|
|
|
//上传头像
|
|
|
|
|
this.$refs.updateicon.click();
|
|
|
|
|
},
|
|
|
|
|
filepick(e) {
|
|
|
|
|
console.log(this.$refs.updateicon);
|
|
|
|
|
console.log(e);
|
|
|
|
|
const that = this;
|
|
|
|
|
this.visible = true;
|
|
|
|
|
const imgFile = new FileReader();
|
|
|
|
|
imgFile.readAsDataURL(this.$refs.updateicon.files[0]);
|
|
|
|
|
imgFile.onload = function () {
|
|
|
|
|
that.option.img = this.result;
|
|
|
|
|
};
|
|
|
|
|
// this.option.img = window.URL.createObjectURL(
|
|
|
|
|
// this.$refs.updateicon.files[0]
|
|
|
|
|
// )
|
|
|
|
|
this.filelength = this.$refs.updateicon.files.length;
|
|
|
|
|
},
|
|
|
|
|
realTime(data) {
|
|
|
|
|
// data.div.height = "50px";
|
|
|
|
|
// data.div.width = "50px";
|
|
|
|
|
// data.w = 50;
|
|
|
|
|
// data.h = 50;
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
|
|
var previews = data;
|
|
|
|
|
var h = 0.5;
|
|
|
|
|
var w = 0.2;
|
|
|
|
|
this.previewStyle1 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
zoom: h,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.previewStyle2 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
zoom: w,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 固定为 100 宽度
|
|
|
|
|
this.previewStyle3 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
zoom: 100 / previews.w,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 固定为 100 高度
|
|
|
|
|
this.previewStyle4 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
zoom: 100 / previews.h,
|
|
|
|
|
};
|
|
|
|
|
this.previews = data;
|
|
|
|
|
},
|
|
|
|
|
modalcancel() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
this.$refs.updateicon.value = "";
|
|
|
|
|
this.filelength = this.$refs.updateicon.files.length;
|
|
|
|
|
|
|
|
|
|
// console.log(this.filelength)
|
|
|
|
|
},
|
|
|
|
|
changeavatar() {
|
|
|
|
|
this.$refs.cropper.getCropBlob((data) => {
|
|
|
|
|
// const that = this;
|
|
|
|
|
// do something
|
|
|
|
|
// console.log(data)
|
|
|
|
|
const imgFile = new FileReader();
|
|
|
|
|
imgFile.readAsDataURL(data);
|
|
|
|
|
imgFile.onload = function (e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
console.log(this);
|
|
|
|
|
console.log(this.result);
|
|
|
|
|
};
|
|
|
|
|
this.visible = false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// console.log(this.avatarready)
|
|
|
|
|
// console.log(this.filelength)
|
|
|
|
|
this.AvatarWaringmsgshow = false;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -196,10 +466,9 @@ export default {
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
// background-color: pink;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.accountSetList {
|
|
|
|
|
width: 346px;
|
|
|
|
|
height: 500px;
|
|
|
|
|
// height: 500px;
|
|
|
|
|
// background-color: skyblue;
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
.userinfobox {
|
|
|
|
|
@ -211,16 +480,117 @@ export default {
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
.avatarbox {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
width: 64px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
.mask {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
font-size: 54px;
|
|
|
|
|
line-height: 54px;
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 64px;
|
|
|
|
|
line-height: 64px;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
.mask {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
width: 40px;
|
|
|
|
|
margin-top: 11px !important;
|
|
|
|
|
margin-left: 13px !important;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 19px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.username {
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.priceinfo {
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
ul {
|
|
|
|
|
// margin-top: 16px;
|
|
|
|
|
// padding: 0 16px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
li {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 16px 16px 16px 16px;
|
|
|
|
|
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
// border-bottom: 1px solid #f3f4f4;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:nth-child(-n + 2):after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
width: 314px;
|
|
|
|
|
bottom: -1px;
|
|
|
|
|
left: 16px;
|
|
|
|
|
background-color: #f3f4f4;
|
|
|
|
|
}
|
|
|
|
|
span:first-of-type {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
i:first-of-type {
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
span:last-of-type {
|
|
|
|
|
span {
|
|
|
|
|
color: #999999;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
color: #888;
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
// background-color: #ff6a00 !important;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
span {
|
|
|
|
|
span {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
> ul {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
@ -261,12 +631,27 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
> i {
|
|
|
|
|
color: #888;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
// margin-left: 12px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
// background-color: #ff6a00 !important;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
span {
|
|
|
|
|
span {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -277,4 +662,100 @@ export default {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .ant-modal-footer {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-modal-header {
|
|
|
|
|
height: 48px;
|
|
|
|
|
border-bottom: 0px solid #000;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-modal-title {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
text-align: left;
|
|
|
|
|
color: #222222;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-modal-content {
|
|
|
|
|
margin-top: 100px;
|
|
|
|
|
width: 576px;
|
|
|
|
|
height: 409px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .vue-cropper {
|
|
|
|
|
width: 290px !important;
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.cropper-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
/deep/ .cropper-box {
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
.cropper-view-box,
|
|
|
|
|
.cropper-crop-box {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.cropper-crop-box {
|
|
|
|
|
.cropper-face {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
span:last-child {
|
|
|
|
|
// display: none;
|
|
|
|
|
span:nth-child(5) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
span:nth-child(7) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
span:nth-child(10) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
span:nth-child(12) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cropper {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 300px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.previewcontainer {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 50px !important;
|
|
|
|
|
p {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
margin-left: -150px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.show-preview {
|
|
|
|
|
flex: 1;
|
|
|
|
|
-webkit-flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #666;
|
|
|
|
|
.preview {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #cccccc;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btncontainer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 25px;
|
|
|
|
|
button {
|
|
|
|
|
margin: 9px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 63px;
|
|
|
|
|
}
|
|
|
|
|
button:nth-child(1) {
|
|
|
|
|
margin-left: -25px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
