zq
7 months ago
12 changed files with 547 additions and 111 deletions
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,9 @@ |
|||
// 设置页面元素对应高亮
|
|||
export function setHighActive(dom) { |
|||
const ele = document.getElementById(dom) |
|||
ele.classList.add('ceshi') |
|||
ele.scrollIntoView({behavior:'smooth',block:'start'}) |
|||
setTimeout(()=>{ |
|||
ele.classList.remove('ceshi') |
|||
},1000) |
|||
} |
|||
@ -1,52 +1,376 @@ |
|||
<template> |
|||
<div class="page-title-wrap min-flex"> |
|||
<div class="site-personal-wrap min-flex"> |
|||
<div class="siteMessage flex-common" id="siteMessage4"> |
|||
<h3>网页模板</h3> |
|||
<el-form ref="formRef"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<div class="tem-home"> |
|||
<img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt=""> |
|||
<div class="tem-home-bottom"> |
|||
<b>经典深蓝模板（默认）</b> |
|||
<div> |
|||
<div class="tem-look" @click="lookTemImg"> |
|||
<img src="@/assets/register/look-tem.svg" alt=""> |
|||
预览 |
|||
</div> |
|||
<div @click="editTemImg"> |
|||
<img src="@/assets/register/edit-tem.svg" alt=""> |
|||
修改 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line borderNone"></div> |
|||
<div class="flex-right"></div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" /> |
|||
</div> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage5"> |
|||
<h3>在线客服</h3> |
|||
<el-form ref="formRef"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<p class="flex siteMessage5_desc"> <img src="@/assets/site/info_filled.svg" alt=""> |
|||
展示在网站右侧悬浮栏的客服，请至少设置1个</p> |
|||
<el-tab-pane label="网站客服" name="first"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<p class="flex-left-desc">旺旺客服</p> |
|||
<GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum" |
|||
placeholder="请输入数字"> |
|||
</GuipInput> |
|||
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" |
|||
:show-file-list="false" :on-success="handleAvatarSuccess" |
|||
:before-upload="beforeAvatarUpload"> |
|||
<GuipButton> <img src="@/assets/site/info_filled.svg" alt=""> 重新上传</GuipButton> |
|||
</el-upload> |
|||
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<p class="flex-left-desc">微信客服</p> |
|||
<div class="flex"> |
|||
<img v-if="imageUrl" :src="imageUrl" class="kefuImg"> |
|||
<img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg"> |
|||
<div class="right"> |
|||
<el-upload class="avatar-uploader" |
|||
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" |
|||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
|||
<GuipButton> <img src="" alt=""> 重新上传</GuipButton> |
|||
</el-upload> |
|||
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="报告页客服" name="second">报告页客服</el-tab-pane> |
|||
<el-tab-pane label="支付账单客服" name="third">支付账单客服</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
|
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" /> |
|||
</div> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage6"> |
|||
<h3>功能显隐</h3> |
|||
<el-form :model="personalForm3" ref="formRef"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<p class="flex-left-desc">价格显隐</p> |
|||
<div class="left-pay-list mb24"> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span> |
|||
<GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示" |
|||
inactiveText="隐藏" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
</div> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span> |
|||
<GuipSwitch :modelValue="personalForm3.weixinFlag2" activeText="显示" |
|||
inactiveText="隐藏" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<p class="flex-left-desc">报告与真伪查询</p> |
|||
<div class="left-pay-list mb24"> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span> |
|||
<GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示" |
|||
inactiveText="隐藏" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
</div> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span> |
|||
<GuipSwitch :modelValue="personalForm3.weixinFlag4" activeText="显示" |
|||
inactiveText="隐藏" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm3')" /> |
|||
</div> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage7"> |
|||
<h3>安全提交</h3> |
|||
<el-form :model="personalForm7" ref="formRef"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<p class="flex-left-desc">查重服务</p> |
|||
<div class="left-pay-list mb24"> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>60分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></span> |
|||
<GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示" |
|||
inactiveText="隐藏" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
<el-checkbox-group v-model="checkList" class="checkboxGroup"> |
|||
<el-checkbox label="识别重复标题"></el-checkbox> |
|||
<el-checkbox label="识别重复作者"></el-checkbox> |
|||
<el-checkbox label="识别重复正文"></el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<p class="flex-left-desc">AI服务</p> |
|||
<div class="left-pay-list mb24"> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>3分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></span> |
|||
<GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示" |
|||
inactiveText="隐藏" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
<el-checkbox-group v-model="checkList1" class="checkboxGroup"> |
|||
<el-checkbox label="识别重复标题"></el-checkbox> |
|||
<el-checkbox label="识别重复辅助信息"></el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm7')" /> |
|||
</div> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage8"> |
|||
<h3>初始订单数 <span>设定检测基数，首页显示检测数量时，显示三个月内实际数值+该数值</span></h3> |
|||
<el-form :model="personalForm8" ref="formRef"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<p class="flex-left-desc">检测篇数基数</p> |
|||
<GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum" placeholder="请输入数字"> |
|||
</GuipInput> |
|||
</div> |
|||
<div class="flex-line borderNone"></div> |
|||
<div class="flex-right"></div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm8')" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import { mapState } from 'vuex'; |
|||
import store from '../store'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|||
|
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
// GuipInput, |
|||
|
|||
GuipInput, |
|||
GuipButton, |
|||
GuipSwitch, |
|||
GroupFormBtns |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
activeName: 'first', |
|||
imageUrl: '', |
|||
checkList1: ['识别重复辅助信息'], |
|||
checkList: ['识别重复正文'], |
|||
// 在线客服 |
|||
personalForm3: { |
|||
weixinFlag1: false, |
|||
weixinFlag2: true, |
|||
weixinFlag3: true, |
|||
weixinFlag4: false |
|||
}, |
|||
personalForm7: { |
|||
weixinFlag3: true, |
|||
weixinFlag4: true, |
|||
}, |
|||
personalForm8: { |
|||
checkNum: 0, |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_PAGETITLE', '个性化设置'); |
|||
}, |
|||
methods: { |
|||
handleTabClick(tab, event) { |
|||
console.log(tab, event); |
|||
}, |
|||
lookTemImg() { |
|||
|
|||
}, |
|||
editTemImg() { |
|||
|
|||
}, |
|||
onSwitchChange(data) { |
|||
console.log(data, '---'); |
|||
}, |
|||
cancelClick() { |
|||
console.log('quxiao'); |
|||
}, |
|||
confirmClick(type) { |
|||
console.log(type, '确认'); |
|||
}, |
|||
// 上传图片 |
|||
handleAvatarSuccess(res, file) { |
|||
this.imageUrl = URL.createObjectURL(file.raw); |
|||
}, |
|||
beforeAvatarUpload(file) { |
|||
const isJPG = file.type === 'image/jpeg'; |
|||
const isLt2M = file.size / 1024 / 1024 < 2; |
|||
|
|||
if (!isJPG) { |
|||
this.$message.error('上传头像图片只能是 JPG 格式!'); |
|||
} |
|||
if (!isLt2M) { |
|||
this.$message.error('上传头像图片大小不能超过 2MB!'); |
|||
} |
|||
return isJPG && isLt2M; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.page-title-wrap { |
|||
<style lang="scss" scoped> |
|||
.site-personal-wrap { |
|||
width: 100%; |
|||
|
|||
.siteMessage { |
|||
border-radius: 4px; |
|||
transition: all .5s; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.siteMessage5_desc {} |
|||
|
|||
.checkboxGroup { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-top: 18px; |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.tem-home { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
background: #FFFFFF; |
|||
/* middle/middle_line_1 */ |
|||
border: 1px solid #DFE2E6; |
|||
|
|||
.tem-home-top { |
|||
width: 100%; |
|||
height: 72px; |
|||
/* 自动布局 */ |
|||
} |
|||
|
|||
.tem-home-bottom { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 22px 32px; |
|||
justify-content: space-between; |
|||
|
|||
.tem-look { |
|||
margin-right: 36px; |
|||
} |
|||
|
|||
div { |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 24px 12px; |
|||
box-sizing: border-box; |
|||
|
|||
b { |
|||
/* headline/haeadline_3_bold */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
letter-spacing: 0.06em; |
|||
font-variation-settings: "opsz" auto; |
|||
/* text/text_1 */ |
|||
color: #1E2226; |
|||
display: inline-block; |
|||
align-items: center; |
|||
|
|||
img { |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.left-pay-list { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
|
|||
/* middle/middle_grey_0 */ |
|||
// span{ |
|||
// color: #23242B; |
|||
// } |
|||
.left-pay-item { |
|||
padding: 24px; |
|||
color: #23242B; |
|||
background: #FAFAFA; |
|||
margin-top: 12px; |
|||
|
|||
p { |
|||
text-align: left; |
|||
margin-top: 9px; |
|||
/* caption/caption_regular */ |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.kefuImg { |
|||
width: 120px; |
|||
height: 120px; |
|||
} |
|||
|
|||
.avatar-desc { |
|||
/* regular/body3-Regular */ |
|||
/* 样式描述：辅助文字 */ |
|||
font-family: Inter; |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 20px; |
|||
letter-spacing: normal; |
|||
font-variation-settings: "wght" 400; |
|||
/* Light/中性色 Neutral/Text/Regular */ |
|||
color: var(--el-color-text-regular); |
|||
/* #606266 */ |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue