|
|
<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 @click="uploadavatar" style="cursor: pointer">
|
|
|
<span class="iconfont icon-morentouxiang" v-if="!userbaseInfo.imgSrc"></span>
|
|
|
<img :src="userbaseInfo.imgSrc" alt="" v-else />
|
|
|
<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 style="display: none">
|
|
|
<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('/accountsetting/boundtel')" :class="{ tagactive: activelist === 1 }">
|
|
|
<span><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i>绑定手机</span
|
|
|
><span
|
|
|
><span>{{ userinfo.hidetel }}</span>
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
</span>
|
|
|
</li>
|
|
|
<li @click="pushto('/accountsetting/boundwx')" :class="{ tagactive: activelist === 2 }">
|
|
|
<span><i class="iconfont icon-weixin1"></i>绑定微信</span
|
|
|
><span
|
|
|
><span v-if="userinfo.openIdAppDTDL">已绑定</span>
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
</span>
|
|
|
</li>
|
|
|
<!-- <li
|
|
|
@click="pushto('/accountsetting/boundbankcard')"
|
|
|
:class="{ tagactive: activelist === 3 }"
|
|
|
style="display: none"
|
|
|
>
|
|
|
<span
|
|
|
><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
|
|
|
><span
|
|
|
><span>{{ userbanklist.length }}张</span>
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
</span>
|
|
|
</li> -->
|
|
|
</ul>
|
|
|
<ul>
|
|
|
<li @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 }"
|
|
|
style="display: none"
|
|
|
>
|
|
|
<span><i class="iconfont icon-shimingrenzheng"></i>实名认证</span
|
|
|
><span
|
|
|
><span v-if="userinfo.realName">已认证</span
|
|
|
><span v-else>未认证</span>
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
</span>
|
|
|
</li> -->
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="rightcontent">
|
|
|
<router-view :userinfo="userinfo" :userbanklist="userbanklist" :userpoint="userpoint" :userbalance="userbalance"></router-view>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
userBaseInfoApi,
|
|
|
getUserBankListApi,
|
|
|
userBalanceApi,
|
|
|
getPointApi,
|
|
|
// uploadUserAvatarApi,
|
|
|
userCardApi,
|
|
|
} from "../../../api/userinfo";
|
|
|
import { VueCropper } from "vue-cropper";
|
|
|
import request from "@/utils/request";
|
|
|
|
|
|
export default {
|
|
|
inject: ["reload"],
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
VueCropper,
|
|
|
},
|
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
userinfo: {}, // 用户基础信息
|
|
|
userbalance: "",
|
|
|
userpoint: "",
|
|
|
activelist: "",
|
|
|
userbanklist: [],
|
|
|
cardinfo: {},
|
|
|
visible: false,
|
|
|
previewStyle3: {},
|
|
|
previews: {},
|
|
|
userbaseInfo: JSON.parse(localStorage.getItem("LOGIN_DATA")),
|
|
|
option: {
|
|
|
// 裁剪图片配置
|
|
|
img: "", // 裁剪图片的地址
|
|
|
outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
|
|
|
outputType: "png", // 裁剪生成图片的格式（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", // 图片默认渲染方式
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
path() {
|
|
|
return this.$route.fullPath;
|
|
|
},
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
path() {
|
|
|
this.changeactive();
|
|
|
},
|
|
|
},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
this.getUserInfo();
|
|
|
this.changeactive();
|
|
|
this.getuserbnak();
|
|
|
this.getUserBalanceInfo();
|
|
|
this.getPoint();
|
|
|
this.getcardcount();
|
|
|
console.log(this.userbaseInfo);
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
async getUserInfo() {
|
|
|
try {
|
|
|
const { data } = await userBaseInfoApi();
|
|
|
if (data.status === 200) {
|
|
|
this.userinfo = data.data;
|
|
|
console.log(this.userinfo);
|
|
|
const beforetel = this.userinfo.tel.substr(0, 3);
|
|
|
const aftertel = this.userinfo.tel.substr(7, 4);
|
|
|
this.userinfo.hidetel = beforetel + "****" + aftertel;
|
|
|
const beforeId = this.userinfo.IDCard.substr(0, 1);
|
|
|
const afterId = this.userinfo.IDCard.substr(17, 1);
|
|
|
this.userinfo.hideId = beforeId + "****************" + afterId;
|
|
|
const hidename = this.userinfo.realName.substr(this.userinfo.realName.length - 1, 1);
|
|
|
// this.userinfo.hidename = hidename;
|
|
|
let newstr = "";
|
|
|
for (let i = 0; i < this.userinfo.realName.length - 1; i++) {
|
|
|
newstr += "*";
|
|
|
}
|
|
|
this.userinfo.hidename = newstr + hidename;
|
|
|
console.log(aftertel);
|
|
|
console.log(beforetel);
|
|
|
}
|
|
|
console.log(data);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
},
|
|
|
pushto(url) {
|
|
|
this.$router.push(url);
|
|
|
},
|
|
|
changeactive() {
|
|
|
if (this.path.indexOf("/loginpsw") > -1) {
|
|
|
this.activelist = 0;
|
|
|
} else if (this.path.indexOf("/boundtel") > -1) {
|
|
|
this.activelist = 1;
|
|
|
} else if (this.path.indexOf("/boundwx") > -1) {
|
|
|
this.activelist = 2;
|
|
|
} else if (this.path.indexOf("/boundbankcard") > -1) {
|
|
|
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() {
|
|
|
try {
|
|
|
const { data } = await getUserBankListApi();
|
|
|
console.log(data);
|
|
|
this.userbanklist = data.data;
|
|
|
this.userbanklist.forEach((ele) => {
|
|
|
ele.newbankNo = ele.bankNo.substr(14, 4);
|
|
|
});
|
|
|
// const newdata = this.userbanklist.bankNo.substr(14, 4);
|
|
|
// console.log(newdata);
|
|
|
} catch (error) {
|
|
|
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() {
|
|
|
let that = this;
|
|
|
this.$refs.cropper.getCropBlob((data) => {
|
|
|
// const that = this;
|
|
|
// do something
|
|
|
// console.log(data)
|
|
|
const imgFile = new FileReader();
|
|
|
imgFile.readAsDataURL(data);
|
|
|
imgFile.onload = function () {
|
|
|
let formData1 = new FormData();
|
|
|
formData1.append("imgName", "abc.png");
|
|
|
formData1.append("userImg", this.result);
|
|
|
|
|
|
request({
|
|
|
method: "post",
|
|
|
url: "/yishoudan/user/changeUserImgsrc",
|
|
|
data: formData1,
|
|
|
withCredentials: true,
|
|
|
// headers: {'Content-Type': 'application/x-www-form-urlencoded'}
|
|
|
|
|
|
headers: {
|
|
|
"Content-Type": "multipart/form-data;boundary = " + new Date().getTime(),
|
|
|
},
|
|
|
})
|
|
|
.then(({ data }) => {
|
|
|
console.log(data);
|
|
|
console.log();
|
|
|
if (data.status === 200) {
|
|
|
let userinfo = JSON.parse(localStorage.getItem("LOGIN_DATA"));
|
|
|
// userinfo.imgSrc =;
|
|
|
localStorage.setItem("LOGIN_DATA", JSON.stringify({ ...userinfo, imgSrc: data.data.url }));
|
|
|
that.reload();
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
console.log(data);
|
|
|
};
|
|
|
this.visible = false;
|
|
|
});
|
|
|
|
|
|
// console.log(this.avatarready)
|
|
|
// console.log(this.filelength)
|
|
|
this.AvatarWaringmsgshow = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.accountcontent {
|
|
|
// height: 1000px;
|
|
|
margin-top: 16px;
|
|
|
// background-color: pink;
|
|
|
display: flex;
|
|
|
.accountSetList {
|
|
|
width: 346px;
|
|
|
// height: 500px;
|
|
|
// background-color: skyblue;
|
|
|
margin-right: 16px;
|
|
|
.userinfobox {
|
|
|
width: 346px;
|
|
|
height: 158px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 0px;
|
|
|
padding: 24px 0;
|
|
|
text-align: center;
|
|
|
border: 1px solid #ededed;
|
|
|
.avatarbox {
|
|
|
margin: 0 auto;
|
|
|
width: 64px;
|
|
|
position: relative;
|
|
|
|
|
|
&:hover {
|
|
|
.mask {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
img {
|
|
|
display: block;
|
|
|
width: 64px;
|
|
|
height: 64px;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
i {
|
|
|
width: 64px;
|
|
|
height: 64px;
|
|
|
color: #ff4400;
|
|
|
> span {
|
|
|
font-size: 64px;
|
|
|
line-height: 64px;
|
|
|
}
|
|
|
.mask {
|
|
|
position: absolute;
|
|
|
display: none;
|
|
|
width: 64px;
|
|
|
height: 64px;
|
|
|
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: 0px;
|
|
|
overflow: hidden;
|
|
|
li {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
padding: 16px 16px 16px 16px;
|
|
|
|
|
|
line-height: 24px;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1px solid #ededed;
|
|
|
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: #ff4400 !important;
|
|
|
color: #ff4400;
|
|
|
span {
|
|
|
span {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
i {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
i {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
> ul {
|
|
|
background-color: #fff;
|
|
|
margin-top: 16px;
|
|
|
// padding: 0 16px;
|
|
|
border-radius: 0px;
|
|
|
overflow: hidden;
|
|
|
border: 1px solid #ededed;
|
|
|
li {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
padding: 16px;
|
|
|
line-height: 24px;
|
|
|
justify-content: space-between;
|
|
|
cursor: pointer;
|
|
|
&:not(:last-child) {
|
|
|
// border-bottom: 1px solid #ededed;
|
|
|
}
|
|
|
&:nth-child(-n + 3):after {
|
|
|
position: absolute;
|
|
|
content: "";
|
|
|
display: inline-block;
|
|
|
height: 1px;
|
|
|
width: 314px;
|
|
|
bottom: -1px;
|
|
|
left: 16px;
|
|
|
background-color: #f3f4f4;
|
|
|
}
|
|
|
> span:first-child {
|
|
|
font-size: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
i {
|
|
|
margin-right: 12px;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
> span:last-child {
|
|
|
line-height: 22px;
|
|
|
span {
|
|
|
color: #999;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
> i {
|
|
|
color: #888;
|
|
|
// margin-left: 12px;
|
|
|
vertical-align: middle;
|
|
|
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
}
|
|
|
&:hover {
|
|
|
// background-color: #ff4400 !important;
|
|
|
color: #ff4400;
|
|
|
span {
|
|
|
span {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
i {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
i {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.rightcontent {
|
|
|
width: 838px;
|
|
|
height: 600px;
|
|
|
padding: 0 16px;
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #ededed;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
::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>
|