zq
4 days ago
3 changed files with 788 additions and 1 deletions
@ -0,0 +1,775 @@ |
|||
<template> |
|||
<div class="main-content12"> |
|||
<!-- page content --> |
|||
<div class="site-setting-wrap min-flex-right"> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage1"> |
|||
<h3>管理证书</h3> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<div class="uploadwrap"> |
|||
<label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label> |
|||
<el-upload class="flex mt12" accept=".jpg,.png" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true"> |
|||
|
|||
<el-button class="flex" slot="trigger" size="small" type="primary">选取文件</el-button> |
|||
</el-upload> |
|||
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<p class="flex-left-desc">微信客服</p> |
|||
</div> |
|||
</div> |
|||
<GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="submitUpload" /> |
|||
</el-form> |
|||
</div> |
|||
<div class="siteMessage flex-common mt-18" id="siteMessage2"> |
|||
<h3>平台退款</h3> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<div class="beforeNotice"> |
|||
<div class="flex justify-content-space-between"> |
|||
<h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3> |
|||
|
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0" @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch> |
|||
</div> |
|||
<p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="siteMessage flex-common mt-18" id="siteMessage3"> |
|||
<h3>分账管理</h3> |
|||
<el-form class="tcpr-wrap"> |
|||
<el-tabs v-model="profitShareTab" @tab-click="handleClick"> |
|||
<el-tab-pane label="分账设置" name="profit_share_setting"> |
|||
<div class="beforeNotice"> |
|||
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
|||
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a> |
|||
|
|||
<p class="mt12 flex">1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。</p> |
|||
<p class="mt10 flex">2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。</p> |
|||
</div> |
|||
<div class="semBidWrap"> |
|||
<div class="baidu-wrap bidWrap"> |
|||
|
|||
<div class="bidwrap-item"> |
|||
<h3 class="flex">分账开关<GuipSwitch :modelValue="payinfo.profit_share_status" :active-value="1" :inactive-value="0" @change="updateProfitShareStatus(payinfo)"></GuipSwitch></h3> |
|||
<div class="biditemMast mb12 flex-between"> |
|||
<div class="bidwrap-item-top flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_1.png" alt=""> |
|||
<div class="top-right column"> |
|||
<b>配置商户证书</b> |
|||
<p>微信商户平台> 账户中心 > API安全，申请API证书。</p> |
|||
</div> |
|||
</div> |
|||
<div class="flex" v-if="payinfo.apiv3"> |
|||
<span :class="'yesSet'">已设置</span> |
|||
<GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('cert')">管理设置</GuipButton> |
|||
</div> |
|||
<div class="flex" v-else> |
|||
<span :class="'notSet'">未设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('cert')">立即设置</GuipButton> |
|||
</div> |
|||
</div> |
|||
<div class="biditemMast mb12 flex-between"> |
|||
<div class="bidwrap-item-top flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_2.png" alt=""> |
|||
<div class="top-right column"> |
|||
<b>设置 APIv3 密钥</b> |
|||
<p class="flex">请在微信商户平台的"账户中心 > API安全"中设置APIv3秘钥。</p> |
|||
</div> |
|||
</div> |
|||
<div class="flex" v-if="payinfo.apiv3"> |
|||
<span :class="'yesSet'">已设置</span> |
|||
<GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('apiv3')">管理设置</GuipButton> |
|||
</div> |
|||
<div class="flex" v-else> |
|||
<span :class="'notSet'">未设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('apiv3')">立即设置</GuipButton> |
|||
</div> |
|||
</div> |
|||
<div class="biditemMast mb12 flex-between"> |
|||
<div class="bidwrap-item-top flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_3.png" alt=""> |
|||
<div class="top-right column"> |
|||
<b>添加分账接收方</b> |
|||
<p>接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p> |
|||
</div> |
|||
</div> |
|||
<div class="flex" v-if="profitShareInfo.receiver_name"> |
|||
<span :class="'yesSet'">已设置</span> |
|||
<GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('profit_share_receivers')">查看</GuipButton> |
|||
</div> |
|||
<div class="flex" v-else> |
|||
<span :class="'notSet'">未设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('profit_share_receivers')">立即设置</GuipButton> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="分账记录" name="profit_share_list">分账记录</el-tab-pane> |
|||
</el-tabs> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
|
|||
<GuipDialog type="normal" :dialogVisible="dialogVisibleCert" title="配置商户证书" :show-close-button="false" |
|||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert(payinfo)" |
|||
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> |
|||
<div class="config-offline-wrap"> |
|||
<el-form> |
|||
<div class="uploadwrap"> |
|||
<label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label> |
|||
<el-upload name="apiclient_cert" headers="uploadHeaders" data="{'payid':this.payid}" class="mt12" accept=".jpg,.png" ref="upload" action="/agentnew/upload_pay_cert" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true" :limit="1"> |
|||
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{width:'118px'}"><i class="bgImg"></i>选择文件</GuipButton> |
|||
</el-upload> |
|||
</div> |
|||
<div class="uploadwrap mt-18"> |
|||
<label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label> |
|||
<el-upload name="apiclient_key" headers="uploadHeaders" data="{'payid':this.payid}" class="mt12" accept=".jpg,.png" ref="upload" action="/agentnew/upload_pay_cert" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true" :limit="1"> |
|||
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{width:'118px'}"><i class="bgImg"></i>选择文件</GuipButton> |
|||
</el-upload> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</GuipDialog> |
|||
|
|||
<GuipDialog type="normal" :dialogVisible="dialogVisibleApiv3" title="配置应用信息" :show-close-button="false" |
|||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveApiv3(payinfo)" |
|||
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> |
|||
<div class="config-offline-wrap"> |
|||
<el-form> |
|||
<p class="flex mb-24">请在微信商户平台的"账户中心 > API安全"中设置APIv3秘钥。</p> |
|||
<GuipInput ref="GuipInput" v-model="payinfo.apiv3" placeholder="请输入APIv3秘钥" /> |
|||
</el-form> |
|||
</div> |
|||
</GuipDialog> |
|||
<GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="分账接收方" :show-close-button="false" |
|||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveProfitShareReceivers(profitShareInfo)" |
|||
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> |
|||
<div class="config-offline-wrap"> |
|||
<el-form> |
|||
<p class="flex mb-24">接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p> |
|||
<GuipInput ref="GuipInput" column="column" required label="1.接收方名称" desc="商户全称，小微商户或个体户，填开户人姓名" v-model="profitShareInfo.receiver_name" placeholder="请输入分账接收方名称" /> |
|||
<GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号" v-model="profitShareInfo.receiver_account" placeholder="请输入分账接收方账号" /> |
|||
|
|||
<GuipSelect v-model="profitShareInfo.relation_type" column="column" clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type" :options="profitShareReceiversRelationType" valueKey="key" labelKey="val" placeholder="请选择分账接收方关系" @change="profitShareReceiversRelationTypeChange(profitShareInfo)" /> |
|||
<GuipInput v-if="this.showCustomInput" ref="GuipInput" column="column" required label="自定义接收方关系" desc="最多10个字" v-model="profitShareInfo.custom_relation" placeholder="请输入自定义接收方关系" /> |
|||
</el-form> |
|||
</div> |
|||
</GuipDialog> |
|||
</div> |
|||
|
|||
</template> |
|||
<script> |
|||
import store from '@/store'; |
|||
import { mapState } from 'vuex'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GroupFormBtns from '@/components/GroupFormBtns.vue' |
|||
import GuipButton from '@/components/GuipButton.vue' |
|||
import GuipDialog from '@/components/GuipDialog.vue' |
|||
import GuipInput from '@/components/GuipInput.vue' |
|||
import GuipSelect from '@/components/GuipSelect.vue' |
|||
|
|||
// 收款方式 |
|||
const PAY_TYPE_TAOBAO = 0; // 淘宝 |
|||
const PAY_TYPE_WEIXIN = 2; // 微信 |
|||
const PAY_TYPE_ALIPAY = 3; // 支付宝 |
|||
const PAY_TYPE_JINGDONG = 4; // 京东 |
|||
const PAY_TYPE_PDD = 11; // 拼多多 |
|||
|
|||
export default { |
|||
// 收款方式设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
GuipSwitch, |
|||
GroupFormBtns, |
|||
GuipButton, |
|||
GuipDialog, |
|||
GuipInput, |
|||
GuipSelect, |
|||
}, |
|||
data() { |
|||
return { |
|||
// AUTH |
|||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
payid: '', |
|||
payinfo: [], |
|||
payType: -1, |
|||
payIsAutoRefund: -1, |
|||
paySvg: '', |
|||
// 收款方式 |
|||
payTypeTaoBao: PAY_TYPE_TAOBAO, |
|||
payTypeWeixin: PAY_TYPE_WEIXIN, |
|||
payTypeAlipay: PAY_TYPE_ALIPAY, |
|||
payTypeJingdong: PAY_TYPE_JINGDONG, |
|||
payTypePdd: PAY_TYPE_PDD, |
|||
confirmText: '保存', |
|||
|
|||
fileList: [], |
|||
|
|||
profitShareTab: 'profit_share_setting', |
|||
dialogVisibleApiv3: false, |
|||
dialogVisibleProfitShare: false, |
|||
dialogVisibleCert: false, |
|||
|
|||
profitShareInfo: { |
|||
'receiver_name': '', |
|||
}, |
|||
profitShareReceiversRelationType: [], |
|||
showCustomInput: false, |
|||
|
|||
uploadParams: { |
|||
}, |
|||
uploadHeaders: { |
|||
'Auth': this.token |
|||
}, |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
created() { |
|||
store.commit('SET_CUSTOMIZE', true); |
|||
store.commit('SET_SLIDER_MENU', 'paySettingData'); |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_PAGETITLE', '支付授权'); |
|||
|
|||
this.getPayment(); |
|||
this.getProfitShareInfo(); |
|||
this.payid = this.$route.query.payid; |
|||
}, |
|||
methods: { |
|||
getPayment() { |
|||
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
|||
payid: this.$route.query.payid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.payinfo = response.data |
|||
this.payType = response.data.type |
|||
this.payIsAutoRefund = Number(response.data.is_auto_refund) |
|||
this.paySvg = require('@/assets/pay/pay_'+this.payType+'.svg') |
|||
if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) { |
|||
this.confirmText = '去授权'; |
|||
} else if (this.payType == PAY_TYPE_PDD) { |
|||
this.confirmText = '同步授权'; |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getProfitShareInfo() { |
|||
this.$http('POST', '/agentnew/ajax_get_profit_share_info', { |
|||
pid: this.$route.query.payid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.profitShareReceiversRelationType = response.data.receivers_relation_type |
|||
if (response.status && response.data.receivers.length > 0) { |
|||
this.profitShareInfo = response.data.receivers[0] |
|||
console.log(this.profitShareInfo) |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
updatePayAutoRefund(row) { |
|||
this.$http('POST', '/agentnew/ajax_setting_auto_refund', { |
|||
payid: this.$route.query.payid, |
|||
status: row.is_auto_refund==1 ? 0 : 1, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayment() |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
updateProfitShareStatus(row) { |
|||
this.$http('POST', '/agentnew/ajax_update_profit_share_status', { |
|||
pid: this.$route.query.payid, |
|||
profit_share_status: row.profit_share_status==1 ? 0 : 1, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayment() |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
cancle() { |
|||
this.getPayment(); |
|||
}, |
|||
submitUpload() { |
|||
this.$refs.upload.submit(); |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
console.log(file, fileList); |
|||
}, |
|||
handlePreview(file) { |
|||
console.log(file); |
|||
}, |
|||
handleClick(tab, event) { |
|||
console.log(tab, event); |
|||
}, |
|||
showDialog(type) { |
|||
if (type == 'apiv3') { |
|||
this.dialogVisibleApiv3 = true; |
|||
this.dialogVisibleProfitShare = false; |
|||
this.dialogVisibleCert = false; |
|||
} else if (type == 'profit_share_receivers') { |
|||
this.dialogVisibleProfitShare = true; |
|||
this.dialogVisibleApiv3 = false; |
|||
this.dialogVisibleCert = false; |
|||
} else if (type == 'cert') { |
|||
this.dialogVisibleCert = true; |
|||
this.dialogVisibleApiv3 = false; |
|||
this.dialogVisibleProfitShare = false; |
|||
} |
|||
}, |
|||
// 确认按钮事件 |
|||
saveCert(row) { |
|||
console.log(row) |
|||
this.$refs.upload.submit(); |
|||
// this.$http('POST', '/agentnew/upload_pay_cert', { |
|||
// payid: this.$route.query.payid, |
|||
// apiv3: row.apiv3 |
|||
// }, { |
|||
// headers: { |
|||
// 'Auth': this.token |
|||
// } |
|||
// }).then(response => { |
|||
// this.$nextTick(() => { |
|||
// if (response.status) { |
|||
// this.$Message.success(response.info); |
|||
// } else { |
|||
// this.$Message.error(response.info); |
|||
// } |
|||
// }) |
|||
// }).catch(error => { |
|||
// console.error(error, 'error') |
|||
// }) |
|||
|
|||
// this.dialogVisibleApiv3 = false; |
|||
}, |
|||
saveApiv3(row) { |
|||
this.$http('POST', '/agentnew/ajax_save_apiv3', { |
|||
pid: this.$route.query.payid, |
|||
apiv3: row.apiv3 |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
|
|||
this.dialogVisibleApiv3 = false; |
|||
}, |
|||
saveProfitShareReceivers(row) { |
|||
this.$http('POST', '/agentnew/ajax_add_profit_share_receivers', { |
|||
pid: this.$route.query.payid, |
|||
rname: row.receiver_name, |
|||
raccount: row.receiver_account, |
|||
rtype: row.relation_type, |
|||
custom_relation: row.custom_relation |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
|
|||
this.dialogVisibleApiv3 = false; |
|||
}, |
|||
// 取消按钮事件 |
|||
handleCancelConfig() { |
|||
this.dialogVisibleApiv3 = false; |
|||
this.dialogVisibleProfitShare = false; |
|||
this.dialogVisibleCert = false; |
|||
}, |
|||
dialogVisibleChange(data) { |
|||
console.log(data, 'data098908090'); |
|||
}, |
|||
profitShareReceiversRelationTypeChange(row) { |
|||
console.log(row.relation_type, 'relation_type'); |
|||
if (row.relation_type == 'CUSTOM') { |
|||
this.showCustomInput = true; |
|||
} else { |
|||
this.showCustomInput = false; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
.gray { |
|||
color: #626573 !important; |
|||
} |
|||
|
|||
.mt-18 { |
|||
margin-top: 18px; |
|||
} |
|||
.ml-23 { |
|||
margin-left: 23px; |
|||
} |
|||
|
|||
.justify-content-space-between { |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.beforeNotice { |
|||
|
|||
h4 { |
|||
margin: 0; |
|||
gap: 8px; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
margin-bottom: 18px; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
padding: 20px 14px; |
|||
border-radius: 4px; |
|||
/* middle/middle_grey_0 */ |
|||
background: #FAFAFA; |
|||
|
|||
div { |
|||
margin-top: 2px; |
|||
padding-left: 23px; |
|||
|
|||
p { |
|||
color: #8A9099; |
|||
} |
|||
|
|||
} |
|||
|
|||
p { |
|||
color: #1E2226; |
|||
|
|||
i { |
|||
font-style: normal; |
|||
} |
|||
|
|||
&:last-child { |
|||
display: flex; |
|||
align-items: stretch; |
|||
|
|||
b { |
|||
font-weight: normal; |
|||
color: #8A9099; |
|||
display: inline-flex; |
|||
|
|||
img { |
|||
margin-left: 4px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
margin-right: 10px; |
|||
|
|||
img { |
|||
margin-left: 5px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.siteMessage { |
|||
border-radius: 4px; |
|||
transition: all .5s; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.siteMessage h3 { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
|
|||
.site-setting-wrap { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
.upload-wrap { |
|||
display: grid; |
|||
justify-items: start; |
|||
} |
|||
|
|||
.uploadwrap { |
|||
text-align: left; |
|||
} |
|||
|
|||
lable { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
.ml-4 { |
|||
margin-left: 4px; |
|||
} |
|||
.mb-24 { |
|||
margin-bottom: 24px; |
|||
} |
|||
.mb-30 { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.tcpr-wrap { |
|||
.bidwrap-item { |
|||
padding: 0 !important; |
|||
background: transparent !important; |
|||
|
|||
.biditemMast { |
|||
background: #fff; |
|||
padding: 24px 16px; |
|||
} |
|||
} |
|||
|
|||
.semBidWrap { |
|||
padding-bottom: 24rpx; |
|||
} |
|||
} |
|||
.semBidWrap { |
|||
background: #FAFAFA; |
|||
padding: 18px 14px; |
|||
box-sizing: border-box; |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.close-bid { |
|||
color: #626573; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
transition: all .3s; |
|||
|
|||
&:hover { |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin-left: 6px; |
|||
} |
|||
} |
|||
|
|||
|
|||
.bidWrap { |
|||
.bidwrap-item { |
|||
padding: 24px 16px; |
|||
box-sizing: border-box; |
|||
border-radius: 8px; |
|||
background: #FFFFFF; |
|||
|
|||
|
|||
.bid-item-img { |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 22px; |
|||
} |
|||
|
|||
.bidwrap-item-top { |
|||
.top-right { |
|||
p { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
|
|||
img { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bidwrap-item-bot { |
|||
padding-left: 54px; |
|||
justify-content: flex-end; |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
.notSet, |
|||
.yesSet { |
|||
margin-right: 12px; |
|||
color: #FF4D4F; |
|||
} |
|||
|
|||
.yesSet { |
|||
color: #00C261; |
|||
} |
|||
|
|||
|
|||
.beforeNotice { |
|||
h4 { |
|||
margin: 0; |
|||
gap: 8px; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
margin-bottom: 18px; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
padding: 20px 14px; |
|||
border-radius: 4px; |
|||
/* middle/middle_blue_1 */ |
|||
background: #F2F7FF; |
|||
/* middle/middle_blue_3 */ |
|||
border: 1px solid #BFDAFF; |
|||
|
|||
div { |
|||
margin-top: 2px; |
|||
padding-left: 23px; |
|||
|
|||
p { |
|||
color: #8A9099; |
|||
} |
|||
|
|||
} |
|||
|
|||
p { |
|||
color: #1E2226; |
|||
|
|||
i { |
|||
font-style: normal; |
|||
} |
|||
|
|||
&:last-child { |
|||
display: flex; |
|||
align-items: stretch; |
|||
|
|||
b { |
|||
font-weight: normal; |
|||
color: #8A9099; |
|||
display: inline-flex; |
|||
|
|||
img { |
|||
margin-left: 4px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
margin-right: 10px; |
|||
|
|||
img { |
|||
margin-left: 12px; |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.upload-button { |
|||
border-radius: 4px; |
|||
background: #F2F3F5; |
|||
box-sizing: border-box; |
|||
border: 1px solid #BABDC2; |
|||
.bgImg{ |
|||
width: 20px; |
|||
height: 16px; |
|||
margin-right: 6px; |
|||
background-image: url(@/assets/site/uploadIcon.svg); |
|||
} |
|||
&:hover{ |
|||
.bgImg{ |
|||
background-image: url(@/assets/site/uploadIcon_light.svg); |
|||
} |
|||
} |
|||
} |
|||
.upload-title { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #23242B; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue