|
@@ -6,15 +6,11 @@
|
|
|
<div class="tips">说明:开通商户账号是指开通商城后台管理系统的总登录账号。</div>
|
|
|
|
|
|
<el-card shadow="never" class="my-card">
|
|
|
- <el-form class="my-form" ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="100px" label-position="right">
|
|
|
+ <el-form class="my-form" ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="100px"
|
|
|
+ label-position="right">
|
|
|
<el-form-item label="商户账号" prop="account">
|
|
|
<el-input v-model="step1Form.account" autocomplete="off" placeholder="请输入商户账号"></el-input>
|
|
|
- <el-popover
|
|
|
- class="question"
|
|
|
- placement="right-start"
|
|
|
- title="账号设置"
|
|
|
- width="260"
|
|
|
- trigger="hover"
|
|
|
+ <el-popover class="question" placement="right-start" title="账号设置" width="260" trigger="hover"
|
|
|
content="账号设置需按数字、字母组合设置至少12位账号">
|
|
|
<svg-icon icon-class="question" slot="reference" />
|
|
|
</el-popover>
|
|
@@ -35,37 +31,30 @@
|
|
|
<el-input v-model="step1Form.email" autocomplete="off" placeholder="请输入电子邮箱"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="地址" prop="address">
|
|
|
- <div style="display:flex;">
|
|
|
- <el-input placeholder="请选择地址" autocomplete="off" readonly style="margin-right: 20px;" v-model="step1Form.address"></el-input>
|
|
|
- <geographicalPosi :formData="step1Form" @selectPosi="selectAddress"></geographicalPosi>
|
|
|
- </div>
|
|
|
+ <div style="display:flex;">
|
|
|
+ <el-input placeholder="请选择地址" autocomplete="off" readonly style="margin-right: 20px;"
|
|
|
+ v-model="step1Form.address"></el-input>
|
|
|
+ <geographicalPosi :formData="step1Form" @selectPosi="selectAddress"></geographicalPosi>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="登录密码" prop="newPassword">
|
|
|
- <el-input v-model="step1Form.newPassword" ref="password1" autocomplete="off" placeholder="请输入登录密码" :type="passwordType1"></el-input>
|
|
|
+ <el-input v-model="step1Form.newPassword" ref="password1" autocomplete="off" placeholder="请输入登录密码"
|
|
|
+ :type="passwordType1"></el-input>
|
|
|
<span class="show-pwd" @click="showPwd(1)">
|
|
|
<svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
</span>
|
|
|
- <el-popover
|
|
|
- class="question"
|
|
|
- placement="right-start"
|
|
|
- title="密码设置"
|
|
|
- width="260"
|
|
|
- trigger="hover"
|
|
|
+ <el-popover class="question" placement="right-start" title="密码设置" width="260" trigger="hover"
|
|
|
content="密码设置需按数字、字母组合设置至少12位密码">
|
|
|
<svg-icon icon-class="question" slot="reference" />
|
|
|
</el-popover>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
|
- <el-input v-model="step1Form.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码" :type="passwordType2"></el-input>
|
|
|
+ <el-input v-model="step1Form.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
|
|
|
+ :type="passwordType2"></el-input>
|
|
|
<span class="show-pwd" @click="showPwd(2)">
|
|
|
<svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
</span>
|
|
|
- <el-popover
|
|
|
- class="question"
|
|
|
- placement="right-start"
|
|
|
- title="密码设置"
|
|
|
- width="260"
|
|
|
- trigger="hover"
|
|
|
+ <el-popover class="question" placement="right-start" title="密码设置" width="260" trigger="hover"
|
|
|
content="确认密码需要和登录密码保持一致">
|
|
|
<svg-icon icon-class="question" slot="reference" />
|
|
|
</el-popover>
|
|
@@ -78,19 +67,15 @@
|
|
|
<div class="setting_title">商城配置</div>
|
|
|
<el-divider></el-divider>
|
|
|
<el-form label-width="100px" label-position="right">
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- :action="baseURL + 'common/upload'"
|
|
|
- :headers="myHeaders"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="uploadSuccess"
|
|
|
- :before-upload="beforeUpload">
|
|
|
+ <el-upload class="avatar-uploader" :action="baseURL + 'common/upload'" :headers="myHeaders"
|
|
|
+ :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
|
|
|
</el-upload>
|
|
|
<el-form-item label="主logo:" prop="imgUrl">
|
|
|
<div class="images">
|
|
|
<div class="main-img">
|
|
|
<div class="img" v-if="img1_url" @mouseover="img1_hover = true;" @mouseout="img1_hover = false;">
|
|
|
- <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
+ <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px"
|
|
|
+ fit="contain"></el-image>
|
|
|
<div class="mask" v-show="img1_hover">
|
|
|
<i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
|
|
|
<i class="el-icon-upload2" @click="uploadImage('img1')"></i>
|
|
@@ -101,7 +86,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tmp-img">
|
|
|
- <el-image :src="require('@/assets/template/template_1.png')" :preview-src-list="[require('@/assets/template/template_1.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
|
|
|
+ <el-image :src="require('@/assets/template/template_1.png')"
|
|
|
+ :preview-src-list="[require('@/assets/template/template_1.png')]"
|
|
|
+ style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
|
|
|
<div class="tmp">示例图</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -113,7 +100,8 @@
|
|
|
<div class="images">
|
|
|
<div class="main-img">
|
|
|
<div class="img" v-if="img2_url" @mouseover="img2_hover = true;" @mouseout="img2_hover = false;">
|
|
|
- <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
+ <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px"
|
|
|
+ fit="contain"></el-image>
|
|
|
<div class="mask" v-show="img2_hover">
|
|
|
<i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
|
|
|
<i class="el-icon-upload2" @click="uploadImage('img2')"></i>
|
|
@@ -124,7 +112,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tmp-img">
|
|
|
- <el-image :src="require('@/assets/template/template_2.png')" :preview-src-list="[require('@/assets/template/template_2.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
|
|
|
+ <el-image :src="require('@/assets/template/template_2.png')"
|
|
|
+ :preview-src-list="[require('@/assets/template/template_2.png')]"
|
|
|
+ style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
|
|
|
<div class="tmp">示例图</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -136,7 +126,8 @@
|
|
|
<div class="images">
|
|
|
<div class="main-img">
|
|
|
<div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
|
|
|
- <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
+ <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px"
|
|
|
+ fit="contain"></el-image>
|
|
|
<div class="mask" v-show="img3_hover">
|
|
|
<i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
|
|
|
<i class="el-icon-upload2" @click="uploadImage('img3')"></i>
|
|
@@ -147,7 +138,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tmp-img">
|
|
|
- <el-image :src="require('@/assets/template/template_3.png')" :preview-src-list="[require('@/assets/template/template_3.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
|
|
|
+ <el-image :src="require('@/assets/template/template_3.png')"
|
|
|
+ :preview-src-list="[require('@/assets/template/template_3.png')]"
|
|
|
+ style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
|
|
|
<div class="tmp">示例图</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -159,39 +152,41 @@
|
|
|
|
|
|
|
|
|
<!-- --------------------------- -->
|
|
|
- <!-- <el-form-item label="头像logo:" prop="imgUrl">
|
|
|
+ <el-form-item label="头像logo:" prop="imgUrl">
|
|
|
<div class="images">
|
|
|
<div class="main-img">
|
|
|
- <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
|
|
|
- <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
- <div class="mask" v-show="img3_hover">
|
|
|
- <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
|
|
|
- <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
|
|
|
+ <div class="img" v-if="qrcode1_url" @mouseover="qrcode1_hover = true;" @mouseout="qrcode1_hover = false;">
|
|
|
+ <el-image ref="qrcode1" :src="qrcode1_url" :preview-src-list="[qrcode1_url]" style="width: 120px; height: 120px"
|
|
|
+ fit="contain"></el-image>
|
|
|
+ <div class="mask" v-show="qrcode1_hover">
|
|
|
+ <i class="el-icon-zoom-in" @click="previewImage('qrcode1')"></i>
|
|
|
+ <i class="el-icon-upload2" @click="uploadImage('qrcode1')"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="add" v-else @click="uploadImage('img3')">
|
|
|
+ <div class="add" v-else @click="uploadImage('qrcode1')">
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </el-form-item> -->
|
|
|
+ </el-form-item>
|
|
|
<!-- --------------------------- -->
|
|
|
- <!-- <el-form-item label="头像logo:" prop="imgUrl">
|
|
|
+ <el-form-item label="头像logo:" prop="imgUrl">
|
|
|
<div class="images">
|
|
|
<div class="main-img">
|
|
|
- <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
|
|
|
- <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
- <div class="mask" v-show="img3_hover">
|
|
|
- <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
|
|
|
- <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
|
|
|
+ <div class="img" v-if="qrcode2_url" @mouseover="qrcode2_hover = true;" @mouseout="qrcode2_hover = false;">
|
|
|
+ <el-image ref="qrcode2" :src="qrcode2_url" :preview-src-list="[qrcode2_url]" style="width: 120px; height: 120px"
|
|
|
+ fit="contain"></el-image>
|
|
|
+ <div class="mask" v-show="qrcode2_hover">
|
|
|
+ <i class="el-icon-zoom-in" @click="previewImage('qrcode2')"></i>
|
|
|
+ <i class="el-icon-upload2" @click="uploadImage('qrcode2')"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="add" v-else @click="uploadImage('img3')">
|
|
|
+ <div class="add" v-else @click="uploadImage('qrcode2')">
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </el-form-item> -->
|
|
|
+ </el-form-item>
|
|
|
<!-- --------------------------- -->
|
|
|
|
|
|
|
|
@@ -202,9 +197,10 @@
|
|
|
<div class="setting_title">微信配置</div>
|
|
|
<el-divider></el-divider>
|
|
|
<!-- <div class="tips">说明:企微配置是指通过配置企业微信将企微用户和系统打通,实现企业微信用户信息同平台互通,聊天会话信息同步</div> -->
|
|
|
- <div class="tips" style="margin-top: 20px">商户名称:{{step1Form.nickName}}</div>
|
|
|
+ <div class="tips" style="margin-top: 20px">商户名称:{{ step1Form.nickName }}</div>
|
|
|
|
|
|
- <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="200px" label-position="right">
|
|
|
+ <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="200px"
|
|
|
+ label-position="right">
|
|
|
<!-- <el-card shadow="never" class="my-card">
|
|
|
<div class="title">1.配置企业ID</div>
|
|
|
<div class="box">指引:进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【我的企业】,将企业ID分别复制并填写到下方输入框中</div>
|
|
@@ -269,17 +265,14 @@
|
|
|
<div class="footer" :class="classObj">
|
|
|
<el-button @click="changeStep(0)" v-show="step > 1">上一步</el-button>
|
|
|
<el-button @click="changeStep(1)" v-show="step < 3">下一步</el-button>
|
|
|
- <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
|
|
|
- <el-popconfirm
|
|
|
- title="确定关闭吗?"
|
|
|
- @confirm="goBack"
|
|
|
- style="margin-left: 10px;"
|
|
|
- >
|
|
|
+ <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交'
|
|
|
+ }}</el-button>
|
|
|
+ <el-popconfirm title="确定关闭吗?" @confirm="goBack" style="margin-left: 10px;">
|
|
|
<el-button slot="reference">关 闭</el-button>
|
|
|
</el-popconfirm>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -288,7 +281,7 @@ import { getToken } from '@/utils/auth'
|
|
|
import { addAccount } from "@/api/merchant";
|
|
|
import geographicalPosi from '@/components/geographicalPosi/index.vue'
|
|
|
export default {
|
|
|
- components: {geographicalPosi},
|
|
|
+ components: { geographicalPosi },
|
|
|
data() {
|
|
|
var validateAccount = (rule, value, callback) => {
|
|
|
if (value === '') {
|
|
@@ -326,7 +319,7 @@ export default {
|
|
|
};
|
|
|
return {
|
|
|
baseURL: process.env.VUE_APP_BASE_API,
|
|
|
- myHeaders: {'x-token': getToken()},
|
|
|
+ myHeaders: { 'x-token': getToken() },
|
|
|
step: 1,
|
|
|
step1Form: {
|
|
|
account: '', // 账号
|
|
@@ -335,11 +328,13 @@ export default {
|
|
|
chargePerson: '', // 负责人
|
|
|
phone: '', // 联系电话
|
|
|
email: '', // 电子邮箱
|
|
|
- lat: '',
|
|
|
- lng: '',
|
|
|
+ lat: '',
|
|
|
+ lng: '',
|
|
|
address: '', // 地址
|
|
|
newPassword: '', // 登录密码
|
|
|
confirmPassword: '', // 确认密码
|
|
|
+ qrcode1:'',
|
|
|
+ qrcode2:''
|
|
|
},
|
|
|
step1FormRules: {
|
|
|
account: [
|
|
@@ -348,7 +343,7 @@ export default {
|
|
|
nickName: [
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
],
|
|
|
- address: [
|
|
|
+ address: [
|
|
|
{ required: true, message: '请选择GPS地址', trigger: 'blur' }
|
|
|
],
|
|
|
appName: [
|
|
@@ -377,6 +372,10 @@ export default {
|
|
|
img2_hover: false,
|
|
|
img3_url: '',
|
|
|
img3_hover: false,
|
|
|
+ qrcode1_url:'',
|
|
|
+ qrcode1_hover:false,
|
|
|
+ qrcode2_url:'',
|
|
|
+ qrcode2_hover:false,
|
|
|
|
|
|
step3Form: {
|
|
|
enterpriseId: '',
|
|
@@ -427,16 +426,16 @@ export default {
|
|
|
goBack() {
|
|
|
this.$router.go(-1);
|
|
|
},
|
|
|
-
|
|
|
- selectAddress(res){
|
|
|
- this.step1Form.lng = res.center[0]
|
|
|
- this.step1Form.lat = res.center[1]
|
|
|
- this.step1Form.address = res.name
|
|
|
- },
|
|
|
-
|
|
|
+
|
|
|
+ selectAddress(res) {
|
|
|
+ this.step1Form.lng = res.center[0]
|
|
|
+ this.step1Form.lat = res.center[1]
|
|
|
+ this.step1Form.address = res.name
|
|
|
+ },
|
|
|
+
|
|
|
// 显示隐藏密码
|
|
|
showPwd(num) {
|
|
|
- if(num == 1) {
|
|
|
+ if (num == 1) {
|
|
|
if (this.passwordType1 === 'password') {
|
|
|
this.passwordType1 = ''
|
|
|
} else {
|
|
@@ -446,7 +445,7 @@ export default {
|
|
|
this.$refs.password1.focus()
|
|
|
})
|
|
|
}
|
|
|
- if(num == 2) {
|
|
|
+ if (num == 2) {
|
|
|
if (this.passwordType2 === 'password') {
|
|
|
this.passwordType2 = ''
|
|
|
} else {
|
|
@@ -493,10 +492,10 @@ export default {
|
|
|
|
|
|
// 切换步骤
|
|
|
changeStep(type) {
|
|
|
- if(type == 1) {
|
|
|
- this.step ++;
|
|
|
- }else {
|
|
|
- this.step --;
|
|
|
+ if (type == 1) {
|
|
|
+ this.step++;
|
|
|
+ } else {
|
|
|
+ this.step--;
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -506,20 +505,20 @@ export default {
|
|
|
this.$refs.step1Form.validate((valid) => {
|
|
|
if (valid) {
|
|
|
// 验证第二步
|
|
|
- if(this.img1_url && this.img2_url && this.img3_url) {
|
|
|
+ if (this.img1_url && this.img2_url && this.img3_url && this.qrcode1_url && this.qrcode2_url) {
|
|
|
// 验证第三步
|
|
|
this.$refs.step3Form.validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.submitForm();
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
this.step = 3;
|
|
|
}
|
|
|
})
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
this.$errorMsg('请完善商城配置');
|
|
|
this.step = 2;
|
|
|
}
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
this.step = 1;
|
|
|
}
|
|
|
})
|
|
@@ -538,14 +537,16 @@ export default {
|
|
|
linkName: this.step1Form.chargePerson,
|
|
|
linkPhone: this.step1Form.phone,
|
|
|
email: this.step1Form.email,
|
|
|
- lat: this.step1Form.lat,
|
|
|
- lng: this.step1Form.lng,
|
|
|
+ lat: this.step1Form.lat,
|
|
|
+ lng: this.step1Form.lng,
|
|
|
address: this.step1Form.address,
|
|
|
password: this.step1Form.confirmPassword,
|
|
|
|
|
|
minLogo1: this.img1_url,
|
|
|
minLogo2: this.img2_url,
|
|
|
minLogo3: this.img3_url,
|
|
|
+ qrcode1: this.qrcode1_url,
|
|
|
+ qrcode2: this.qrcode2_url,
|
|
|
|
|
|
corpId: this.step3Form.enterpriseId,
|
|
|
secret2: this.step3Form.listSecret,
|
|
@@ -560,6 +561,8 @@ export default {
|
|
|
subMchId: this.step3Form.childMerchantId,
|
|
|
template: this.step3Form.templateId,
|
|
|
}
|
|
|
+ console.log(params)
|
|
|
+ return
|
|
|
addAccount(params).then(res => {
|
|
|
this.$successMsg('开通成功');
|
|
|
setTimeout(() => {
|
|
@@ -576,130 +579,150 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .setting_title {
|
|
|
- padding-left: 0;
|
|
|
- }
|
|
|
- .tips {
|
|
|
+.setting_title {
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tips {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.my-card {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ background: rgb(235, 240, 249);
|
|
|
+ padding: 10px;
|
|
|
font-size: 14px;
|
|
|
- }
|
|
|
- .my-card {
|
|
|
- margin-top: 20px;
|
|
|
- .box {
|
|
|
- background: rgb(235, 240, 249);
|
|
|
- padding: 10px;
|
|
|
- font-size: 14px;
|
|
|
- margin: 20px 0;
|
|
|
- line-height: 18px;
|
|
|
- ::v-deep .el-link {
|
|
|
- vertical-align: unset;
|
|
|
- }
|
|
|
+ margin: 20px 0;
|
|
|
+ line-height: 18px;
|
|
|
+
|
|
|
+ ::v-deep .el-link {
|
|
|
+ vertical-align: unset;
|
|
|
}
|
|
|
}
|
|
|
- .my-form {
|
|
|
- width: 450px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- .show-pwd {
|
|
|
- position: absolute;
|
|
|
- right: 15px;
|
|
|
- top: 0;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
- .question {
|
|
|
- position: absolute;
|
|
|
- right: -30px;
|
|
|
- top: 0;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
- .my-form2 {
|
|
|
- ::v-deep input {
|
|
|
- width: 400px;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.my-form {
|
|
|
+ width: 450px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.show-pwd {
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.question {
|
|
|
+ position: absolute;
|
|
|
+ right: -30px;
|
|
|
+ top: 0;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.my-form2 {
|
|
|
+ ::v-deep input {
|
|
|
+ width: 400px;
|
|
|
}
|
|
|
- .tips {
|
|
|
- margin-top: 10px;
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 300px;
|
|
|
- text-align: center;
|
|
|
- line-height: 32px;
|
|
|
- background: #ffefef;
|
|
|
- font-size: 14px;
|
|
|
- color: #f66460;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.tips {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 300px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+ background: #ffefef;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #f66460;
|
|
|
}
|
|
|
- .images {
|
|
|
+}
|
|
|
+
|
|
|
+.images {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .main-img {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .main-img {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 120px;
|
|
|
- margin-right: 20px;
|
|
|
- .img {
|
|
|
- border: 1px dashed #eaeaea;
|
|
|
- border-radius: 5px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .el-image {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .mask {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- background: rgba($color: #000000, $alpha: 0.3);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- i {
|
|
|
- font-size: 20px;
|
|
|
- color: #ffffff;
|
|
|
- cursor: pointer;
|
|
|
- margin: 0 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- .add {
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 120px;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .img {
|
|
|
border: 1px dashed #eaeaea;
|
|
|
border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- i {
|
|
|
- font-size: 30px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- .tmp-img {
|
|
|
+ overflow: hidden;
|
|
|
position: relative;
|
|
|
- .tmp {
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- line-height: 20px;
|
|
|
- padding: 0 8px;
|
|
|
- background: #f66460;
|
|
|
- border-radius: 0 0 10px 0;
|
|
|
- font-size: 12px;
|
|
|
- color: #ffffff;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.3);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ border: 1px dashed #eaeaea;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tmp-img {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tmp {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ background: #f66460;
|
|
|
+ border-radius: 0 0 10px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+}</style>
|