11 changed files with 4 additions and 4786 deletions
@ -1,714 +0,0 @@ |
|||||
<template> |
|
||||
<div class="home-wrap column"> |
|
||||
<div class="home-main flex"> |
|
||||
<div class="home-main-left column"> |
|
||||
<div class="systemNotice common-area"> |
|
||||
<h2 class="flex-between"> |
|
||||
<b>系统通知</b> |
|
||||
<span class="hoverCommon" @click="lookMoreSystem">查看更多</span> |
|
||||
</h2> |
|
||||
<div class="systemNotice-main"> |
|
||||
<div class="sales-item flex" v-for="(item) in systemList" :key="item.name"> |
|
||||
<img :src="require(`@/assets/home/NEW.svg`)" alt=""> |
|
||||
<div class="column"> |
|
||||
<b class="flex">{{ item.label }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> </b> |
|
||||
<p>{{ item.desc }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="salesStatistics common-area"> |
|
||||
<h2 class="flex-between"> |
|
||||
<b>销售统计 <span>2024–10-28数据</span></b> |
|
||||
<span class="hoverCommon" @click="lookMoreSystem">查看全部</span> |
|
||||
|
|
||||
</h2> |
|
||||
<div class="salesStatistics-main flex"> |
|
||||
<div class="sales-item flex" v-for="(item, index) in salesList" :key="item.name"> |
|
||||
<img :src="require(`@/assets/home/sales${index + 1}.png`)" alt=""> |
|
||||
<div class="column"> |
|
||||
<p class="flex"><span class="number">{{ item.num }}</span> <span v-if="index < 2" class="unit">元</span></p> |
|
||||
<span class="label">{{ item.label }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="supplyPrice common-area"> |
|
||||
<h2>供货价格 </h2> |
|
||||
<div class="supplyPrice-main flex"> |
|
||||
<div :class="['supplyPric-item', 'supplyPric-item' + (index1 + 1)]" v-for="(item1, index1) in supplyList1" |
|
||||
:key="item1"> |
|
||||
<div class="item-top flex-between"> |
|
||||
<div class="flex"> |
|
||||
<img :src="require(`@/assets/home/supplyPrice${index1 + 1}.png`)" alt=""> |
|
||||
<b>{{ item1 }}</b> |
|
||||
</div> |
|
||||
<span>详情</span> |
|
||||
</div> |
|
||||
<div class="list-wrap"> |
|
||||
<div v-for="(item2, index2) in supplyList" :key="index2" class="item-list"> |
|
||||
<p class="item-list-name">{{ item2.name }}</p> |
|
||||
<p class="flex-between" v-for="(item3, index3) in item2.list" :key="index3"> |
|
||||
{{ item3.name }} |
|
||||
<span>{{ item3.price }}元/{{ item3.word }}</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<Footer></Footer> |
|
||||
|
|
||||
</div> |
|
||||
<div class="home-main-right"> |
|
||||
<div class="accountBalance flex-between common-area"> |
|
||||
<span>账户余额 <b>4560</b> 元</span> |
|
||||
<span class="hoverCommon">展开</span> |
|
||||
</div> |
|
||||
<div style=" background: #fff"> |
|
||||
<div class="importantReminder common-area"> |
|
||||
<h2>重要提醒</h2> |
|
||||
<div class="reminder1 column"> |
|
||||
<p>淘宝账号即将过期</p> |
|
||||
<div @click="lookTaoBaoNum">查看</div> |
|
||||
</div> |
|
||||
<div class="reminder2 column hide"> |
|
||||
<p>请尽快建立站点，开始售卖</p> |
|
||||
<div @click="lookTaoBaoNum1">立即前往</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="carouselImage common-area"> |
|
||||
<!-- 轮播图 --> |
|
||||
<img src="@/assets/home/home-right.png" alt=""> |
|
||||
</div> |
|
||||
<div class="preferredMarket common-area"> |
|
||||
<h2>优选营销</h2> |
|
||||
<div class="column"> |
|
||||
<div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name"> |
|
||||
<img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt=""> |
|
||||
<div class="column"> |
|
||||
<span class="flex">{{ item.label }} |
|
||||
<!-- <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> --> |
|
||||
</span> |
|
||||
<p>{{ item.desc }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="usageGuide common-area"> |
|
||||
<h2 class="flex-between"> |
|
||||
<b>使用指南</b> |
|
||||
<span class="hoverCommon">查看全部</span> |
|
||||
</h2> |
|
||||
<p class="hoverCommon">我想将商品绑定淘宝店应该怎么做？</p> |
|
||||
<p class="hoverCommon">基于成交量的推广支持</p> |
|
||||
<p class="hoverCommon">二级、裂变分销，发展代理网络</p> |
|
||||
</div> |
|
||||
<div class="customWrap common-area"> |
|
||||
<h2>联系客服</h2> |
|
||||
<img src="@/assets/home/customer.png" alt=""> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Footer from '@/components/Footer.vue'; |
|
||||
|
|
||||
export default { |
|
||||
name: 'HomeView', |
|
||||
data() { |
|
||||
return { |
|
||||
preferredMarketList: [ |
|
||||
{ |
|
||||
desc: '电脑版、小程序、微信H5', |
|
||||
label: '多端系统' |
|
||||
}, |
|
||||
{ |
|
||||
desc: '电脑版、小程序、微信H5', |
|
||||
label: 'OCPC推广' |
|
||||
}, |
|
||||
{ |
|
||||
desc: '电脑版、小程序、微信H5', |
|
||||
label: '多级分销' |
|
||||
}, |
|
||||
{ |
|
||||
desc: '电脑版、小程序、微信H5', |
|
||||
label: '嵌入广告' |
|
||||
}, |
|
||||
{ |
|
||||
desc: '电脑版、小程序、微信H5', |
|
||||
label: '发放卡券' |
|
||||
}, |
|
||||
], |
|
||||
salesList: [ |
|
||||
{ |
|
||||
num: 4560, |
|
||||
label: '销售金额' |
|
||||
}, |
|
||||
{ |
|
||||
num: 1000, |
|
||||
label: '成本支出' |
|
||||
}, |
|
||||
{ |
|
||||
num: 20, |
|
||||
label: '查重订单量' |
|
||||
}, |
|
||||
{ |
|
||||
num: 60, |
|
||||
label: 'AIGC订单量' |
|
||||
}, |
|
||||
], |
|
||||
systemList: [ |
|
||||
{ |
|
||||
desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…', |
|
||||
label: 'AI范文整合的通知' |
|
||||
}, |
|
||||
{ |
|
||||
desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…', |
|
||||
label: 'AI范文整合的通知' |
|
||||
}, |
|
||||
], |
|
||||
supplyList1: [ |
|
||||
'查重服务', |
|
||||
'AIGC服务', |
|
||||
'写作辅助', |
|
||||
], |
|
||||
supplyList: [ |
|
||||
{ |
|
||||
name: '万方系统', |
|
||||
list: [ |
|
||||
{ |
|
||||
name: '万方硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '万方硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '万方硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
name: '维普系统', |
|
||||
list: [ |
|
||||
{ |
|
||||
name: '维普硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '维普系统硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '维普系统硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
name: 'PaperPass旗舰版', |
|
||||
list: [ |
|
||||
{ |
|
||||
name: '万方硕博版', |
|
||||
word: '千字符', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
name: '学术不端', |
|
||||
list: [ |
|
||||
{ |
|
||||
name: '硕博预审版', |
|
||||
word: '篇', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '期刊小论文小篇幅版', |
|
||||
word: '篇', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '期刊小论文小篇幅版', |
|
||||
word: '篇', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
{ |
|
||||
name: '期刊小论文小篇幅版', |
|
||||
word: '篇', |
|
||||
price: 2.4 |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
components: { |
|
||||
// HelloWorld |
|
||||
Footer, |
|
||||
}, |
|
||||
methods: { |
|
||||
lookTaoBaoNum() { |
|
||||
// 查看淘宝账号 |
|
||||
}, |
|
||||
lookTaoBaoNum1() { |
|
||||
// 查看淘宝账号 |
|
||||
}, |
|
||||
lookMoreSystem() { |
|
||||
// 系统通知 -查看更多 |
|
||||
}, |
|
||||
lookAllSales() { |
|
||||
// 销售统计 -查看全部 |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped lang="scss"> |
|
||||
.home-wrap { |
|
||||
padding: 12px; |
|
||||
|
|
||||
|
|
||||
|
|
||||
.home-main { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
gap: 12px; |
|
||||
min-width: 1018px; |
|
||||
max-width: 1750px; |
|
||||
margin: 0 auto; |
|
||||
align-items: stretch; |
|
||||
box-sizing: border-box; |
|
||||
.home-main-left { |
|
||||
min-width: 746px; |
|
||||
max-width: 1398px; |
|
||||
flex: 1; |
|
||||
|
|
||||
.common-area { |
|
||||
width: 100%; |
|
||||
padding: 20px 14px; |
|
||||
box-sizing: border-box; |
|
||||
/* 确保 padding 不会影响宽度计算 */ |
|
||||
background: #fff; |
|
||||
margin-bottom: 12px; |
|
||||
|
|
||||
h2 { |
|
||||
font-size: 16px; |
|
||||
font-weight: bold; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #1E2226; |
|
||||
margin: 0 0 20px 0; |
|
||||
text-align: left; |
|
||||
|
|
||||
span { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #8A9099; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.systemNotice-main { |
|
||||
img { |
|
||||
width: 32px; |
|
||||
height: 32px; |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
|
|
||||
.sales-item { |
|
||||
width: 100%; |
|
||||
justify-content: flex-start; |
|
||||
padding: 18px 12px; |
|
||||
box-sizing: border-box; |
|
||||
transition: all .3s; |
|
||||
|
|
||||
.systemIcon { |
|
||||
display: none; |
|
||||
width: 12px; |
|
||||
height: 8px; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
background: #F6F7FA; |
|
||||
|
|
||||
b { |
|
||||
color: #006AFF; |
|
||||
} |
|
||||
|
|
||||
.systemIcon { |
|
||||
margin-left: 12px; |
|
||||
display: block; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
div { |
|
||||
width: calc(100% - 30px); |
|
||||
} |
|
||||
|
|
||||
/* 确保 padding 不会影响宽度计算 */ |
|
||||
b { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal; |
|
||||
line-height: normal; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
width: 100%; |
|
||||
margin-top: 6px; |
|
||||
overflow: hidden; |
|
||||
-webkit-box-orient: vertical; |
|
||||
text-overflow: ellipsis; |
|
||||
white-space: nowrap; |
|
||||
text-align: left; |
|
||||
color: #8A9099; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.salesStatistics-main { |
|
||||
img { |
|
||||
width: 54px; |
|
||||
height: 54px; |
|
||||
margin-right: 12px; |
|
||||
} |
|
||||
|
|
||||
.sales-item { |
|
||||
width: 25%; |
|
||||
justify-content: flex-start; |
|
||||
padding: 14px 12px; |
|
||||
transition: all .3s; |
|
||||
.number{ |
|
||||
font-size: 22px; |
|
||||
font-weight: bold; |
|
||||
font-family: 'Roboto Condensed'; |
|
||||
display: inline-block; |
|
||||
margin-right: 2px; |
|
||||
color: #1E2226; |
|
||||
line-height: 29px; |
|
||||
} |
|
||||
.unit{ |
|
||||
color: #1E2226; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
.label{ |
|
||||
color: #8A9099; |
|
||||
letter-spacing: 0.08em; |
|
||||
} |
|
||||
&:hover { |
|
||||
border-radius: 8px; |
|
||||
background: #F6F7FA; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.supplyPrice-main { |
|
||||
display: flex; |
|
||||
gap: 20px; |
|
||||
|
|
||||
.supplyPric-item { |
|
||||
padding: 20px 14px; |
|
||||
box-sizing: border-box; |
|
||||
color: #8A9099; |
|
||||
flex: 1; |
|
||||
border-radius: 4px; |
|
||||
transition: all .5s; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
.item-top { |
|
||||
border-bottom: 1px solid #EAECF0; |
|
||||
padding-bottom: 20px; |
|
||||
|
|
||||
b { |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
width: 28px; |
|
||||
height: 28px; |
|
||||
margin-right: 12px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.item-list { |
|
||||
margin-top: 16px; |
|
||||
text-align: left; |
|
||||
line-height: 18px; |
|
||||
|
|
||||
p { |
|
||||
margin-bottom: 8px; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.item-list-name { |
|
||||
margin-bottom: 8px; |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.supplyPric-item1 { |
|
||||
|
|
||||
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 17%, #FFFFFF 100%); |
|
||||
border: 1px solid #DFE2E6; |
|
||||
transition: all .5s ease; |
|
||||
|
|
||||
&:hover { |
|
||||
color: #626573; |
|
||||
transition: all .5s ease; |
|
||||
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 60%); |
|
||||
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.supplyPric-item2 { |
|
||||
background: linear-gradient(180deg, #FFFAF6 1%, rgba(255, 255, 255, 0.6233) 14%); |
|
||||
border: 1px solid #DFE2E6; |
|
||||
transition: all .5s ease; |
|
||||
|
|
||||
&:hover { |
|
||||
color: #626573; |
|
||||
transition: all .5s ease; |
|
||||
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13); |
|
||||
background: linear-gradient(180deg, #FFFAF6 0%, #FFFFFF 60%); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.supplyPric-item3 { |
|
||||
background: linear-gradient(180deg, #FFF6F6 0%, rgba(255, 255, 255, 0.8151) 14%, rgba(255, 255, 255, 0) 100%); |
|
||||
border: 1px solid #DFE2E6; |
|
||||
transition: all .5s ease; |
|
||||
|
|
||||
&:hover { |
|
||||
color: #626573; |
|
||||
transition: all .5s ease; |
|
||||
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13); |
|
||||
background: linear-gradient(180deg, #FFF6F6 0%, #FFFFFF 60%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.home-main-right { |
|
||||
flex: 0 0 auto; |
|
||||
/* 右边盒子不伸缩 */ |
|
||||
min-width: 260px; |
|
||||
/* 右边盒子最小宽度 */ |
|
||||
max-width: 328px; |
|
||||
/* 右边盒子最大宽度 */ |
|
||||
width: 260px; |
|
||||
|
|
||||
/* 在 1440px 屏幕下的固定宽度 */ |
|
||||
.common-area { |
|
||||
padding: 20px 0px; |
|
||||
margin: 0 14px; |
|
||||
text-align: left; |
|
||||
font-size: 14px; |
|
||||
line-height: normal; |
|
||||
letter-spacing: 0.08em; |
|
||||
|
|
||||
/* text/text_1 */ |
|
||||
h2 { |
|
||||
font-weight: bold; |
|
||||
margin: 0; |
|
||||
font-size: 16px; |
|
||||
color: #1E2226; |
|
||||
|
|
||||
span { |
|
||||
font-size: 14px; |
|
||||
color: #8A9099; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.accountBalance { |
|
||||
padding: 27px 14px; |
|
||||
margin: 0; |
|
||||
margin-bottom: 12px; |
|
||||
align-items: baseline; |
|
||||
background: #fff; |
|
||||
|
|
||||
b { |
|
||||
font-family: Roboto Condensed; |
|
||||
font-size: 32px; |
|
||||
font-weight: bold; |
|
||||
line-height: 27px; |
|
||||
letter-spacing: normal; |
|
||||
color: #1F2026; |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
font-size: 14px; |
|
||||
font-weight: normal; |
|
||||
// color: #8A9099; |
|
||||
color: #1F2026; |
|
||||
&:nth-last-child(1){ |
|
||||
color: #8A9099; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.importantReminder { |
|
||||
border-bottom: 1px solid #EAECF0; |
|
||||
|
|
||||
.reminder1, |
|
||||
.reminder2 { |
|
||||
border-radius: 4px; |
|
||||
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%); |
|
||||
padding: 14px 8px; |
|
||||
border: 1px solid transparent; |
|
||||
margin-top: 20px; |
|
||||
transition: all .3s; |
|
||||
|
|
||||
&:hover { |
|
||||
transition: all .3s; |
|
||||
border-radius: 4px; |
|
||||
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%); |
|
||||
/* main/main_erro */ |
|
||||
border: 1px solid #FF4D4F; |
|
||||
} |
|
||||
|
|
||||
div { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
color: #FF4D4F; |
|
||||
margin-top: 10px; |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.carouselImage { |
|
||||
padding-bottom: 0; |
|
||||
|
|
||||
img { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.preferredMarket { |
|
||||
border-bottom: 1px solid #EAECF0; |
|
||||
|
|
||||
h2 { |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
|
|
||||
.sales-item { |
|
||||
padding: 12px 0; |
|
||||
color: #8A9099; |
|
||||
font-size: 12px; |
|
||||
transition: all .3s ease-in-out; |
|
||||
|
|
||||
.systemIcon { |
|
||||
display: none; |
|
||||
width: 12px; |
|
||||
height: 8px; |
|
||||
margin-left: 12px; |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
font-size: 14px; |
|
||||
color: #1F2026; |
|
||||
margin-bottom: 6px; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
.systemIcon { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
transition: all .3s ease-in-out; |
|
||||
color: #006AFF; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
width: 34px; |
|
||||
height: 34px; |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.customWrap { |
|
||||
h2 { |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
/* 自动布局子元素 */ |
|
||||
width: 106px; |
|
||||
height: 106px; |
|
||||
z-index: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.usageGuide { |
|
||||
border-bottom: 1px solid #EAECF0; |
|
||||
|
|
||||
h2 { |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
margin-bottom: 10px; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: 1440px) { |
|
||||
.home-main-right { |
|
||||
transition: all .3s; |
|
||||
width: 286px !important; |
|
||||
/* 在 1440px 屏幕下的固定宽度 */ |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: 1200px) { |
|
||||
.home-main-right { |
|
||||
transition: all .3s; |
|
||||
width: 260px !important; |
|
||||
/* 在 1440px 屏幕下的固定宽度 */ |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (min-width: 1441px) { |
|
||||
.home-main-right { |
|
||||
transition: all .3s; |
|
||||
width: 328px !important; |
|
||||
/* 在大于 1440px 屏幕下的最大宽度 */ |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,125 +0,0 @@ |
|||||
<template> |
|
||||
<div class="pageTemplete-wrap min-flex"> |
|
||||
<div class=" flex-common" id=""> |
|
||||
<h3>模板选择</h3> |
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
||||
<el-tab-pane label="混合（AI+查重）" name="1"> |
|
||||
<div class="templeteImgs"> |
|
||||
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id"> |
|
||||
<img :src="item.img" alt=""> |
|
||||
<span class="look">预览</span> |
|
||||
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
||||
<p>{{ item.list }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane label="仅查重" name="2"> |
|
||||
<div class="templeteImgs"> |
|
||||
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id"> |
|
||||
<img :src="require(item.img)" alt=""> |
|
||||
<span class="look">预览</span> |
|
||||
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
||||
<p>{{ item.list }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane> |
|
||||
<div class="templeteImgs"> |
|
||||
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id"> |
|
||||
<img :src="require(item.img)" alt=""> |
|
||||
<span class="look">预览</span> |
|
||||
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
||||
<p>{{ item.list }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-tabs> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
// 站点设置 |
|
||||
name: '', |
|
||||
components: { |
|
||||
// GuipInput, |
|
||||
// GuipButton, |
|
||||
// GuipSwitch, |
|
||||
// GroupFormBtns |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
activeName: '1', |
|
||||
addImgList: { |
|
||||
'万方': require('@/assets/register/wanfang.png'), |
|
||||
'维普': require('@/assets/register/weipu.svg'), |
|
||||
'学术不端': require('@/assets/register/xueshubuduan.svg'), |
|
||||
}, |
|
||||
templeteList:[ |
|
||||
{ |
|
||||
name:'清新科技蓝', |
|
||||
type:1, |
|
||||
tpl_id:'1', |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝1', |
|
||||
type:0, |
|
||||
tpl_id:'11', |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝2', |
|
||||
tpl_id:'12', |
|
||||
type:0, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝3', |
|
||||
tpl_id:'16', |
|
||||
type:0, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝4', |
|
||||
tpl_id:'13', |
|
||||
type:1, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝5', |
|
||||
tpl_id:'14', |
|
||||
type:1, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝6', |
|
||||
type:1, |
|
||||
tpl_id:'15', |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleClick() { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped lang="scss"> |
|
||||
.pageTemplete-wrap { |
|
||||
width: 100%; |
|
||||
letter-spacing: 0.08em; |
|
||||
padding: 12px; |
|
||||
// overflow-y: auto; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-tabs__nav-wrap { |
|
||||
border-width: 0px 0px 1px 0px; |
|
||||
border-style: solid; |
|
||||
border-color: #DFE2E6; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<template> |
|
||||
<div class="domain-wrap"> |
|
||||
<p>设置自己的域名，需要做 2 步站外操作。如果暂时未准备好，或打算稍后设置，可以先选用平台免费域名，平台随时支持域名修改。 </p> |
|
||||
<div class="domain-box"> |
|
||||
<div class="domain-item"> |
|
||||
<p>1. 域名必须在阿里云完成 ICP 备案</p> |
|
||||
<p>备案网址：https://beian.aliyun.com</p> |
|
||||
</div> |
|
||||
<div class="domain-item"> |
|
||||
<p>2. 域名要解析到平台服务器上</p> |
|
||||
<p>备案网址：https://beian.aliyun.com</p> |
|
||||
</div> |
|
||||
<div class="domain-item"> |
|
||||
<p>3. 域名填写</p> |
|
||||
<el-input placeholder="填写完整域名" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
// import GuipInput from '@/components/GuipInput.vue'; |
|
||||
|
|
||||
export default { |
|
||||
name: '', |
|
||||
props: [''], |
|
||||
components: { |
|
||||
// GuipInput, |
|
||||
|
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
onSwitchChange(data) { |
|
||||
console.log(data, '---'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss"> |
|
||||
.domain-wrap { |
|
||||
.domain-item{ |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.domain-item p:last-child{ |
|
||||
padding-left: 23px; |
|
||||
color: #8A9099; |
|
||||
} |
|
||||
p{ |
|
||||
text-align: left; |
|
||||
line-height: 18px; |
|
||||
margin-bottom: 8px; |
|
||||
} |
|
||||
.domain-box { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-start; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because it is too large
@ -1,358 +0,0 @@ |
|||||
<template> |
|
||||
<div class="site-setting-wrap min-flex-right"> |
|
||||
<div class="siteMessage flex-common" id="siteMessage1"> |
|
||||
<h3>站点信息</h3> |
|
||||
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true" |
|
||||
desc="这是是右侧文案" v-model="siteForm.site_alias" prop="site_alias" |
|
||||
placeholder="仅自己区分站点销售渠道，客户看不到" /> |
|
||||
<GuipInput ref="GuipInput" column="column" label="公司名称" desc="在站点首页底部“关于我们”展示" |
|
||||
v-model="siteForm.company_name" prop="company_name" placeholder="非必填" /> |
|
||||
</div> |
|
||||
<div class="flex-line"></div> |
|
||||
<div class="flex-right"> |
|
||||
<GuipInput ref="GuipInput" column="column" label="公司地址" desc="在站点首页底部“关于我们”展示" |
|
||||
v-model="siteForm.company_address" prop="company_address" placeholder="非必填" /> |
|
||||
<GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示" |
|
||||
v-model="siteForm.company_phone" prop="company_phone" placeholder="非必填" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" /> |
|
||||
|
|
||||
</div> |
|
||||
<div class="siteMessage flex-common" id="siteMessage2"> |
|
||||
<h3>站点信息</h3> |
|
||||
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<GuipFormItem column="column" class="mb24" label="域名来源" required="true"> |
|
||||
<GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source" |
|
||||
prop="domain_source" @change="domain_radioChange" /> |
|
||||
</GuipFormItem> |
|
||||
</div> |
|
||||
<div class="flex-line"></div> |
|
||||
<div class="flex-right"> |
|
||||
<GuipFormItem column="column" label="域名设置" required="true"> |
|
||||
<GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母"> |
|
||||
<span slot="appendshow" style="width: 200px;"> |
|
||||
<GuipSelect width="200px" v-model="domainSuffix" placeholder="选择后缀" |
|
||||
:filterable="true" allow-create :options="domainOptions"> |
|
||||
<!-- <el-option |
|
||||
v-for="item in domainOptions" |
|
||||
:key="item" |
|
||||
:label="item" |
|
||||
:value="item" |
|
||||
/> --> |
|
||||
</GuipSelect> |
|
||||
</span> |
|
||||
</GuipInput> |
|
||||
</GuipFormItem> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" /> |
|
||||
|
|
||||
</div> |
|
||||
<div class="siteMessage flex-common" id="siteMessage3"> |
|
||||
<h3>店铺收款</h3> |
|
||||
<el-form :model="siteForm2" ref="formRef"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<GuipFormItem column="column" class="mb24"> |
|
||||
<div slot="formLeft" class="form-top-icon"> |
|
||||
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" |
|
||||
alt=""><span>微信收款</span> |
|
||||
</div> |
|
||||
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay" |
|
||||
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择" |
|
||||
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin"> |
|
||||
<!-- 自定义触发按钮 --> |
|
||||
<template #trigger> |
|
||||
<span v-if="selectedItemWeixin" |
|
||||
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{ |
|
||||
select_placeholder_weixin ? select_placeholder_weixin : |
|
||||
selectedItemWeixin.desc }}</span> |
|
||||
<span v-else>请选择</span> |
|
||||
</template> |
|
||||
<template #normal> |
|
||||
<div class="flex flex-between noraml-jump"> |
|
||||
<div class="left"> |
|
||||
<b>绑定新微信收款</b> |
|
||||
<p class="one">需要使用您公司的微信支付</p> |
|
||||
<p>需在微信商户平台-产品中心开通Native支付</p> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<GuipButton type="primary" size="medium">前往绑定</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<!-- 自定义下拉选项 --> |
|
||||
<template #item="{ item }"> |
|
||||
<div class="flex-between"> |
|
||||
<div class="left"> |
|
||||
<p class="one">{{ item.label }}</p> |
|
||||
<p>{{ item.desc }}</p> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<img v-if="selectedItem.value == item.value" |
|
||||
src="../assets/register/drop-selected.svg" alt=""> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</CustomDropdown> |
|
||||
</GuipFormItem> |
|
||||
<GuipFormItem column="column"> |
|
||||
<div slot="formLeft" class="form-top-icon"> |
|
||||
<img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;" |
|
||||
alt=""><span>支付宝收款</span> |
|
||||
</div> |
|
||||
<!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay" |
|
||||
:options="options_zhifubao" placeholder="未绑定支付宝收款" /> --> |
|
||||
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay" |
|
||||
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择" |
|
||||
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin"> |
|
||||
<!-- 自定义触发按钮 --> |
|
||||
<template #trigger> |
|
||||
<span v-if="selectedItemWeixin" |
|
||||
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{ |
|
||||
select_placeholder_weixin ? select_placeholder_weixin : |
|
||||
selectedItemWeixin.desc }}</span> |
|
||||
<span v-else>请选择</span> |
|
||||
</template> |
|
||||
<template #normal> |
|
||||
<div class="flex flex-between noraml-jump"> |
|
||||
<div class="left"> |
|
||||
<b>绑定新支付宝收款</b> |
|
||||
<p class="one">需要使用您公司的支付宝支付</p> |
|
||||
<p>需在支付宝商户平台-产品中心开通Native支付</p> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<GuipButton type="primary" size="medium">前往绑定</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<!-- 自定义下拉选项 --> |
|
||||
<template #item="{ item }"> |
|
||||
<div class="flex-between"> |
|
||||
<div class="left"> |
|
||||
<p class="one">{{ item.label }}</p> |
|
||||
<p>{{ item.desc }}</p> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<img v-if="selectedItem.value == item.value" |
|
||||
src="../assets/register/drop-selected.svg" alt=""> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</CustomDropdown> |
|
||||
</GuipFormItem> |
|
||||
</div> |
|
||||
<div class="flex-line"></div> |
|
||||
<div class="flex-right"> |
|
||||
<!-- <div>{{ input1 }}</div> --> |
|
||||
<div class="addStore flex"> |
|
||||
<div></div> |
|
||||
添加其他收款方式 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
// import GuipInput from '@/components/GuipInput.vue'; |
|
||||
import store from '../store'; |
|
||||
import { mapState } from 'vuex'; |
|
||||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|
||||
import GuipInput from '@/components/GuipInput.vue'; |
|
||||
import GuipRadio from '@/components/GuipRadio.vue'; |
|
||||
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
||||
import GuipButton from '@/components/GuipButton.vue'; |
|
||||
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|
||||
import GuipSelect from '@/components/GuipSelect.vue'; |
|
||||
// import {setHighActive} from '@/utils/common'; |
|
||||
export default { |
|
||||
// 站点设置 |
|
||||
name: '', |
|
||||
props: [''], |
|
||||
components: { |
|
||||
GuipRadio, |
|
||||
GuipFormItem, |
|
||||
GuipInput, |
|
||||
CustomDropdown, |
|
||||
GuipButton, |
|
||||
GroupFormBtns, |
|
||||
GuipSelect |
|
||||
|
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
domainInput: '', |
|
||||
domainSuffix: '.chachongz.com', |
|
||||
domainOptions: [ |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '.chachongz.com' |
|
||||
}, |
|
||||
{ |
|
||||
value: '2', |
|
||||
label: '.turnitin.org.cn' |
|
||||
}, |
|
||||
{ |
|
||||
value: '3', |
|
||||
label: '.jishu.chachongz.com' |
|
||||
}, |
|
||||
], |
|
||||
siteForm: { |
|
||||
company_name: '', |
|
||||
company_address: '', |
|
||||
company_phone: '', |
|
||||
site_alias: '', |
|
||||
}, |
|
||||
siteFormrules: { |
|
||||
site_alias: [ |
|
||||
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
|
||||
] |
|
||||
}, |
|
||||
siteForm1: { |
|
||||
domain_set: '', |
|
||||
domain_source: '平台免费域名', |
|
||||
}, |
|
||||
siteForm2: { |
|
||||
zhifubao_pay: '', |
|
||||
weixin_pay: '', |
|
||||
}, |
|
||||
siteFormrules1: { |
|
||||
domain_source: [ |
|
||||
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
|
||||
] |
|
||||
}, |
|
||||
domain_source: [ |
|
||||
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" }, |
|
||||
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" }, |
|
||||
], |
|
||||
options_weixin_null: { |
|
||||
label: '暂无收款账号', |
|
||||
value: '暂时没有收款账号，我想稍后配置', |
|
||||
desc: '暂无收款账号，稍后配置' |
|
||||
}, |
|
||||
select_placeholder_weixin: '暂无收款账号，稍后配置', |
|
||||
selectedItemWeixin: {},//微信收款方式 |
|
||||
options_weixin: [], |
|
||||
options_zhifubao: [], |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapState(['pageTitle','siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
||||
}, |
|
||||
created(){ |
|
||||
store.commit('SET_CUSTOMIZE', true); |
|
||||
store.commit('SET_SLIDER_MENU','siteSettingData'); |
|
||||
}, |
|
||||
mounted() { |
|
||||
store.commit('SET_PAGETITLE', '基本设置'); |
|
||||
}, |
|
||||
methods: { |
|
||||
changeNormalWeixin() { |
|
||||
|
|
||||
}, |
|
||||
changeSelectWeixin(item, flag) { |
|
||||
if (flag) { |
|
||||
this.select_placeholder_weixin = this.options_weixin_null.desc; |
|
||||
return |
|
||||
} |
|
||||
this.selectedItem = { ...item }; |
|
||||
console.log(this.selectedItem, 'this.selectedItem===='); |
|
||||
}, |
|
||||
// 销售渠道 |
|
||||
domain_radioChange(type) { |
|
||||
console.log(type, '--'); |
|
||||
}, |
|
||||
onSwitchChange(data) { |
|
||||
console.log(data, '---'); |
|
||||
}, |
|
||||
submitForm(form) { |
|
||||
console.log(this.$refs[form], '-----'); |
|
||||
this.$refs[form].validate((valid) => { |
|
||||
console.log(this[form], '======formxinxi'); |
|
||||
if (valid) { |
|
||||
alert('提交成功!'); |
|
||||
} else { |
|
||||
return false; |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
cancelClick() { |
|
||||
console.log('quxiao'); |
|
||||
}, |
|
||||
confirmClick(type) { |
|
||||
console.log(type, '确认'); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss"> |
|
||||
.siteMessage { |
|
||||
border-radius: 4px; |
|
||||
transition: all .5s; |
|
||||
border: 1px solid transparent; |
|
||||
} |
|
||||
|
|
||||
.addStore { |
|
||||
margin-top: 12px; |
|
||||
// border-radius: 4px; |
|
||||
// opacity: 1; |
|
||||
// /* text/text_white_2 */ |
|
||||
// border: 1px dashed #BABDC2; |
|
||||
// padding: 15px 20px; |
|
||||
// color: #626573; |
|
||||
// justify-content: center; |
|
||||
|
|
||||
// img { |
|
||||
// margin-right: 12px; |
|
||||
// } |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.site-setting-wrap { |
|
||||
width: 100%; |
|
||||
padding: 12px ; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
#siteMessage2 { |
|
||||
margin: 12px 0; |
|
||||
} |
|
||||
|
|
||||
.domain-wrap { |
|
||||
.domain-item { |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.domain-item p:last-child { |
|
||||
padding-left: 23px; |
|
||||
color: #8A9099; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
text-align: left; |
|
||||
line-height: 18px; |
|
||||
margin-bottom: 8px; |
|
||||
} |
|
||||
|
|
||||
.domain-box { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-start; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,31 +0,0 @@ |
|||||
<template> |
|
||||
<div class="site-personal-wrap min-flex-right"> |
|
||||
<div class="siteMessage flex-common" id="siteMessage4"> |
|
||||
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// import request from "./utils/request"; |
|
||||
import { mapState } from 'vuex'; |
|
||||
import store from '../store'; |
|
||||
export default { |
|
||||
name: 'Sidebar', |
|
||||
props: {}, |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
store.commit('SET_PAGETITLE', '移动端设置'); |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
||||
}, |
|
||||
methods:{ |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,529 +0,0 @@ |
|||||
<!-- 站点列表 --> |
|
||||
<!-- :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]" |
|
||||
:filter-method="filterHandler" --> |
|
||||
<template> |
|
||||
<div class="siteList-wrap column"> |
|
||||
<div class="siteList-main "> |
|
||||
<div class="flex-between site-top"> |
|
||||
<div class="left flex"> |
|
||||
<h2>站点列表</h2> |
|
||||
<GuipButton size="medium" class="addgroupBtn" type="normal" |
|
||||
:btnstyle="{ width: '115px', hright: '32px' }" @click="addGroupVisiable = true"> |
|
||||
<img src="@/assets/site/addIcon.svg" alt="">新增分组 |
|
||||
</GuipButton> |
|
||||
<div style="width: 120px;"> |
|
||||
<GuipSelectFilter v-model="selectedValue" :options="options" :searchable="true" placeholder="请选择" |
|
||||
:filter-method="customFilter" search-placeholder="搜索..." /> |
|
||||
</div> |
|
||||
|
|
||||
<!-- <searchable-select :styleObj="{ |
|
||||
'width': '140px', 'height': '32px' |
|
||||
}" v-model="selectedValue1" :options="options1" :searchable="true" placeholder="请选择" |
|
||||
search-placeholder="关键词搜索" @change="handleChange" /> |
|
||||
<el-form> |
|
||||
<GuipSelect width="600px" v-model="selectedValue" :options="options" defaultValue="选项1" /> |
|
||||
</el-form> |
|
||||
--> |
|
||||
<!-- <GuipSelectFilter2 |
|
||||
v-model="selectedValue" |
|
||||
:options="options1" |
|
||||
:searchable="true" |
|
||||
placeholder="请选择水果" |
|
||||
search-placeholder="搜索水果名称" |
|
||||
no-data-text="没有找到匹配的水果" |
|
||||
@change="handleFruitChange" |
|
||||
/> --> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<GuipButton size="medium" @click="addSite" :btnstyle="btnstyleObj_add" type="primary">新增站点 |
|
||||
</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-form> |
|
||||
<el-table :data="tableData" style="width: 100%" > |
|
||||
<!-- 其他列 --> |
|
||||
<el-table-column prop="short_name" label="站点简称" width="210"> |
|
||||
<template slot-scope="scope"> |
|
||||
<a class="name_link flex cell_render" :href="scope.row.domain" target="_blank"> |
|
||||
{{ scope.row.short_name }} |
|
||||
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
|
||||
</a> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="regtime" label="注册时间"></el-table-column> |
|
||||
|
|
||||
<!-- 价格列 --> |
|
||||
<el-table-column label="站点分组" prop="group"> |
|
||||
<template slot-scope="scope"> |
|
||||
<!-- <a class="name_link flex cell_render" :href="scope.row.link" target="_blank"> |
|
||||
{{ scope.row.name }} |
|
||||
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
|
||||
</a> --> |
|
||||
<!-- <searchable-select slot="reference" :styleObj="{ 'width': '140px', 'height': '32px','position': 'absolute', |
|
||||
'z-index': '1119' }" v-model="scope.row.group" |
|
||||
:options="options1" :searchable="true" placeholder="请选择" search-placeholder="关键词搜索" |
|
||||
@change="handleChange" /> --> |
|
||||
<!-- <GuipSelect width="600px" v-model="scope.row.group" prop="card" :options="options" |
|
||||
defaultValue="选项1" /> --> |
|
||||
<GuipSelectFilter v-model="scope.row.group" :options="options" :searchable="true" |
|
||||
placeholder="请选择" :filter-method="customFilter" search-placeholder="搜索..." /> |
|
||||
<!-- <GuipSelectFilter2 |
|
||||
v-model="scope.row.group" |
|
||||
:options="options1" |
|
||||
:searchable="true" |
|
||||
placeholder="请选择水果" |
|
||||
search-placeholder="搜索水果名称" |
|
||||
no-data-text="没有找到匹配的水果" |
|
||||
@change="handleFruitChange" |
|
||||
/> --> |
|
||||
</template> |
|
||||
<!-- <template v-slot="{ row, $index }"> |
|
||||
<el-popover v-model="row.group_popover" placement="top" trigger="manual" |
|
||||
:ref="`popover-${$index}`" @show="popshow"> |
|
||||
<searchable-select slot="reference" :styleObj="{ 'width': '140px', 'height': '32px' }" v-model="selectedValue1" |
|
||||
:options="options1" :searchable="true" placeholder="请选择" search-placeholder="关键词搜索" |
|
||||
@change="handleChange" > |
|
||||
<span @click="handlePriceClick(row, $index, 'group')"> |
|
||||
<div class="flex cell_render"> |
|
||||
<span v-if="row.group" :key="random()">{{ groupList[row.group] }}</span> |
|
||||
<img class="edit_icon" src="@/assets/site/drop_icon.svg" alt=""> |
|
||||
</div> |
|
||||
</span> |
|
||||
</searchable-select> |
|
||||
</el-popover> |
|
||||
</template> --> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="phone_services" label="手机服务" :filters="phoneService" |
|
||||
:filter-method="filterHandler"> |
|
||||
</el-table-column> |
|
||||
<!-- <el-table-column prop="department" label="部门"> |
|
||||
<template #default="{ row, $index }"> |
|
||||
<template v-if="editingIndex === $index"> |
|
||||
<searchable-select v-model="row.department" :options="departmentOptions" |
|
||||
@change="handleDepartmentChange(row, $index)" @click.native.stop /> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<span @click="startEditing($index)">{{ row.department }}</span> |
|
||||
</template> |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
<el-table-column prop="config_progress_status" label="状态" width="195"> |
|
||||
<!-- <template v-slot="{ row, $index }">--> |
|
||||
<!-- <el-popover v-model="row.status_popover" placement="top" trigger="manual"--> |
|
||||
<!-- :ref="`popover-${$index}`" @show="popshow">--> |
|
||||
<!-- <!– 弹框内容 –>--> |
|
||||
<!-- <div class="statusList">--> |
|
||||
<!-- <p class="flex">--> |
|
||||
<!-- <img style="margin-right: 8px;" src="@/assets/site/info_filled.svg"--> |
|
||||
<!-- alt="">自有域名验证未通过--> |
|
||||
<!-- </p>--> |
|
||||
<!-- <p class="flex" style="margin: 12px 0;">--> |
|
||||
<!-- <img style="margin-right: 8px;" src="@/assets/site/info_filled.svg"--> |
|
||||
<!-- alt="">收款方式未配置--> |
|
||||
<!-- </p>--> |
|
||||
<!-- <p class="flex">--> |
|
||||
<!-- <img style="margin-right: 8px;" src="@/assets/site/info_filled.svg"--> |
|
||||
<!-- alt="">支付宝收款账号未配置--> |
|
||||
<!-- </p>--> |
|
||||
<!-- </div>--> |
|
||||
<!-- <!– 触发弹框的按钮 –>--> |
|
||||
<!-- <span slot="reference" @click="handlePriceClick(row, $index, 'status')">--> |
|
||||
<!-- <div class="flex cell_render">--> |
|
||||
<!-- <span :class="(row.status == '0' ? 'in_services' : 'in_config')">{{--> |
|
||||
<!-- row.status == '0' ? '运行中' : '配置中' }}</span>--> |
|
||||
<!-- <img class="edit_icon" v-if="row.status == '1'"--> |
|
||||
<!-- src="@/assets/site/more_setIcon.png" alt="">--> |
|
||||
<!-- </div>--> |
|
||||
<!-- </span>--> |
|
||||
|
|
||||
<!-- </el-popover>--> |
|
||||
<!-- </template>--> |
|
||||
</el-table-column> |
|
||||
<el-table-column fixed="right" label="操作" width="182"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div class="flex"> |
|
||||
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button> |
|
||||
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<!-- <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'--> |
|
||||
<!-- :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"--> |
|
||||
<!-- :total="tableData.length">--> |
|
||||
<!-- </el-pagination>--> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
<GuipDialog type="normal" width="396px" :dialogVisible="addGroupVisiable" title="温馨提示" :show-close-button="false" |
|
||||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmAddGroup" @cancel="handleCancelAddGroup" |
|
||||
@dialogVisibleChange="dialogVisibleChange"> |
|
||||
<el-input ref="GuipInput" width="252px" v-model="groupName" label="分组名称" placeholder="请输入名称" /> |
|
||||
</GuipDialog> |
|
||||
<Footer></Footer> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import Footer from '@/components/Footer.vue'; |
|
||||
// import GuipInput from '@/components/GuipInput.vue'; |
|
||||
import GuipButton from '@/components/GuipButton.vue'; |
|
||||
// import GuipSelect from '@/components/GuipSelect.vue'; |
|
||||
import GuipSelectFilter from '@/components/GuipSelectFilter.vue'; |
|
||||
import GuipDialog from '@/components/GuipDialog.vue'; |
|
||||
// import SearchableSelect from '@/components/GuipSelectFilter1.vue'; |
|
||||
// import GuipSelectFilter2 from '@/components/GuipSelectFilter2.vue'; |
|
||||
// import SearchableSelect from '@/components/GuipSelectFilter2.vue' |
|
||||
export default { |
|
||||
name: 'sitelist', |
|
||||
components: { |
|
||||
// HelloWorld |
|
||||
// GuipInput, |
|
||||
GuipDialog, |
|
||||
GuipSelectFilter, |
|
||||
// SearchableSelect, |
|
||||
// GuipSelectFilter2, |
|
||||
// SearchableSelect, |
|
||||
// GuipSelect, |
|
||||
Footer, |
|
||||
GuipButton |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
searchText: '', |
|
||||
filteredOptions: this.options, |
|
||||
editingIndex: -1, |
|
||||
gid: 0,//分组id |
|
||||
groupName: '',//分组名称 |
|
||||
addGroupVisiable: false, |
|
||||
selectedValue: '', |
|
||||
fruitOptions: [ |
|
||||
{ label: '苹果', value: 'apple' }, |
|
||||
{ label: '香蕉', value: 'banana' }, |
|
||||
{ label: '橙子', value: 'orange' }, |
|
||||
{ label: '葡萄', value: 'grape' }, |
|
||||
{ label: '西瓜', value: 'watermelon' }, |
|
||||
{ label: '菠萝', value: 'pineapple' } |
|
||||
], |
|
||||
options: [ |
|
||||
{ label: '选项1', value: '1' }, |
|
||||
{ label: '选项2', value: '2' }, |
|
||||
{ label: '选项3', value: '3' }, |
|
||||
// 更多选项... |
|
||||
], |
|
||||
selectedValue1: '', |
|
||||
options1: [ |
|
||||
{ label: '苹果', value: '1' }, |
|
||||
{ label: '香蕉', value: '2' }, |
|
||||
{ label: '橙子', value: '22' }, |
|
||||
{ label: '葡萄', value: '13' }, |
|
||||
{ label: '西瓜', value: '31' }, |
|
||||
{ label: '菠萝', value: '32' }, |
|
||||
{ label: '菠萝1', value: '14' }, |
|
||||
{ label: '菠萝2', value: '15' }, |
|
||||
{ label: '菠萝21', value: '156' }, |
|
||||
{ label: '菠萝22', value: '24' }, |
|
||||
], |
|
||||
btnstyleObj_add: { |
|
||||
width: '90px', |
|
||||
height: '30px' |
|
||||
}, |
|
||||
tableData: [ |
|
||||
// { |
|
||||
// name: '哈哈哈', |
|
||||
// link: 'http://www.chachongz.com', |
|
||||
// registerDate: '2025.02.18', |
|
||||
// group: '1', |
|
||||
// phoneService: '撒大事', |
|
||||
// status: '1',//配置中中 |
|
||||
// }, |
|
||||
// { |
|
||||
// name: '知网学诚教育', |
|
||||
// link: 'http://new.checkcopy.com', |
|
||||
// registerDate: '2025.02.18', |
|
||||
// group: '2', |
|
||||
// phoneService: '设计部', |
|
||||
// status: '0',//运行中 |
|
||||
// }, |
|
||||
], |
|
||||
groupList: { |
|
||||
1: '内部测试', |
|
||||
2: '查重站点' |
|
||||
}, |
|
||||
phoneServicelist: |
|
||||
{ |
|
||||
0: '不限', |
|
||||
1: ' H5', |
|
||||
2: '小程序', |
|
||||
3: '无手机服务' |
|
||||
|
|
||||
}, |
|
||||
currentPage: 1, //当前页 |
|
||||
pageSize: 2, //每页的容量 |
|
||||
total: 0, //列表总数 |
|
||||
phoneService: [ |
|
||||
{ |
|
||||
text: '不限', |
|
||||
value: '0' |
|
||||
}, |
|
||||
{ |
|
||||
text: 'H5', |
|
||||
value: '1' |
|
||||
}, |
|
||||
{ |
|
||||
text: '小程序', |
|
||||
value: '2' |
|
||||
}, |
|
||||
{ |
|
||||
text: 'H5以及小程序', |
|
||||
value: '3' |
|
||||
}, |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
const list = ['group', 'status'] |
|
||||
list.forEach(item => { |
|
||||
this.tableData = this.tableData.map(item1 => { |
|
||||
item1[item + '_popover'] = false |
|
||||
return { |
|
||||
...item1, |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
console.log(this.tableData, '000--'); |
|
||||
|
|
||||
this.getData() |
|
||||
}, |
|
||||
methods: { |
|
||||
getData() { |
|
||||
const that = this |
|
||||
that.tableData = [] |
|
||||
this.$http('POST', '/agentnew/ajax_get_site_list', { |
|
||||
gid: that.gid, |
|
||||
}).then(response => { |
|
||||
this.$nextTick(() => { |
|
||||
that.tableData = Object.values(response.data.sitelist); |
|
||||
}) |
|
||||
}).catch(error => { |
|
||||
console.error(error, 'error') |
|
||||
}) |
|
||||
}, |
|
||||
// 处理搜索输入 |
|
||||
handleSearch(keyword) { |
|
||||
console.log(keyword,'keyword---'); |
|
||||
if (this.filterMethod && typeof this.filterMethod === 'function') { |
|
||||
// 使用自定义筛选方法 |
|
||||
this.filteredOptions = this.filterMethod(keyword, this.options) |
|
||||
} else { |
|
||||
// 默认筛选方法 |
|
||||
if (!keyword) { |
|
||||
this.filteredOptions = this.options |
|
||||
} else { |
|
||||
const lowerKeyword = keyword.toLowerCase() |
|
||||
this.filteredOptions = this.options.filter(item => { |
|
||||
const label = item[this.labelKey] || '' |
|
||||
return label.toString().toLowerCase().includes(lowerKeyword) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
startEditing(index) { |
|
||||
this.editingIndex = index |
|
||||
// 保存原始数据以便取消编辑时恢复 |
|
||||
this.originalData = JSON.parse(JSON.stringify(this.tableData[index])) |
|
||||
}, |
|
||||
|
|
||||
saveEditing() { |
|
||||
this.editingIndex = -1 |
|
||||
this.originalData = null |
|
||||
this.$message.success('保存成功') |
|
||||
}, |
|
||||
|
|
||||
cancelEditing() { |
|
||||
if (this.originalData) { |
|
||||
this.$set(this.tableData, this.editingIndex, this.originalData) |
|
||||
} |
|
||||
this.editingIndex = -1 |
|
||||
this.originalData = null |
|
||||
}, |
|
||||
|
|
||||
handleDepartmentChange(row, index) { |
|
||||
console.log('部门已修改:', index, row.department) |
|
||||
// 可以在这里添加部门变更后的逻辑 |
|
||||
}, |
|
||||
// 确认按钮事件 |
|
||||
handleConfirmAddGroup() { |
|
||||
this.$message.success('点击了确认按钮'); |
|
||||
this.addGroupVisiable = false; |
|
||||
}, |
|
||||
// 取消按钮事件 |
|
||||
handleCancelAddGroup() { |
|
||||
this.$message.warning('点击了取消按钮'); |
|
||||
this.addGroupVisiable = false; |
|
||||
}, |
|
||||
dialogVisibleChange(data) { |
|
||||
console.log(data, 'data098908090'); |
|
||||
}, |
|
||||
handleChange(value) { |
|
||||
console.log('选中值变化:', value) |
|
||||
}, |
|
||||
popshow() { |
|
||||
var ariaEls = document.querySelectorAll('.el-popover') |
|
||||
ariaEls.forEach((item) => { |
|
||||
item.removeAttribute('aria-hidden') |
|
||||
}) |
|
||||
|
|
||||
ariaEls = document.querySelectorAll('.el-radio__original') |
|
||||
ariaEls.forEach((item) => { |
|
||||
item.removeAttribute('aria-hidden') |
|
||||
}) |
|
||||
}, |
|
||||
random() { |
|
||||
var randomNumber = Math.random(); |
|
||||
return randomNumber |
|
||||
}, |
|
||||
handleSizeChange(val) { |
|
||||
this.pageSize = val |
|
||||
}, |
|
||||
handleCurrentChange(val) { |
|
||||
this.currentPage = val |
|
||||
}, |
|
||||
// 列筛选 |
|
||||
filterHandler(value, row, column) { |
|
||||
const property = column['property']; |
|
||||
return row[property] === value; |
|
||||
}, |
|
||||
handleSetClick(row) { |
|
||||
console.log(row); |
|
||||
}, |
|
||||
handleServiceClick(row) { |
|
||||
console.log(row); |
|
||||
}, |
|
||||
addGroup() { |
|
||||
// 新增分组 |
|
||||
}, |
|
||||
addSite() { |
|
||||
// 新增站点 |
|
||||
}, |
|
||||
// 自定义搜索筛选 |
|
||||
customFilter(keyword, options) { |
|
||||
if (!keyword) return options |
|
||||
return options.filter(item => { |
|
||||
// 自定义筛选逻辑 |
|
||||
return item.label.includes(keyword) || item.value.includes(keyword) |
|
||||
}) |
|
||||
}, |
|
||||
customFilter1(keyword, options) { |
|
||||
if (!keyword) return options |
|
||||
// 自定义筛选逻辑，比如同时匹配 label 和 value |
|
||||
return options.filter(item => { |
|
||||
return ( |
|
||||
item.label.includes(keyword) || |
|
||||
item.value.toString().includes(keyword) |
|
||||
) |
|
||||
}) |
|
||||
}, |
|
||||
handleFruitChange(value) { |
|
||||
console.log('水果选择变化:', value) |
|
||||
}, |
|
||||
// 气泡弹出框 |
|
||||
handlePriceClick(row, index, type) { |
|
||||
// 关闭其他行的弹框 |
|
||||
this.tableData.forEach((item, i) => { |
|
||||
if (i !== index) { |
|
||||
item[type + '_popover'] = false; |
|
||||
} |
|
||||
}); |
|
||||
// 打开当前行的弹框 |
|
||||
row[type + '_popover'] = true; |
|
||||
row['edit_' + type] = row[type] |
|
||||
// row.edit_price = row.price; // 初始化输入框的值 |
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
::v-deep .el-popover { |
|
||||
padding: 24px 32px !important; |
|
||||
} |
|
||||
|
|
||||
.siteList-wrap { |
|
||||
padding: 12px 12px 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
.in_services { |
|
||||
color: #0DAF49; |
|
||||
} |
|
||||
|
|
||||
.in_config { |
|
||||
color: #FF4D4F; |
|
||||
} |
|
||||
|
|
||||
.addgroupBtn { |
|
||||
margin: 0 12px; |
|
||||
|
|
||||
img { |
|
||||
margin-right: 4px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.siteList-main { |
|
||||
flex: 1; |
|
||||
padding: 32px 36px; |
|
||||
border-radius: 4px; |
|
||||
box-sizing: border-box; |
|
||||
width: 100%; |
|
||||
background: #FFFFFF; |
|
||||
|
|
||||
.site-top { |
|
||||
margin-bottom: 32px; |
|
||||
|
|
||||
.left { |
|
||||
|
|
||||
h2 { |
|
||||
margin: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.statusList { |
|
||||
padding: 24px 32px; |
|
||||
|
|
||||
img { |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
letter-spacing: 0.08em; |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
|
|
||||
.edit_icon { |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
display: none; |
|
||||
transition: all .3s; |
|
||||
margin-left: 8px; |
|
||||
} |
|
||||
|
|
||||
.name_link { |
|
||||
text-decoration: none; |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
|
|
||||
.el-table__row:hover { |
|
||||
.edit_icon { |
|
||||
display: block; |
|
||||
transition: all .3s; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,508 +0,0 @@ |
|||||
<template> |
|
||||
<div class="site-personal-wrap min-flex-right"> |
|
||||
<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=""> |
|
||||
{{ textObj[activeName] }}</p> |
|
||||
<el-tab-pane label="网站客服" name="1"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<p class="flex-left-desc">旺旺客服</p> |
|
||||
<GuipInput ref="GuipInput" class="mt12 mb24" width="98%" |
|
||||
v-model="personalForm8.checkNum" placeholder="请填写账号"> |
|
||||
</GuipInput> |
|
||||
<p class="flex-left-desc">QQ客服</p> |
|
||||
<div class="qqCode-wrap"> |
|
||||
<el-upload class="avatar-uploader mt12" accept=".jpg,.png" |
|
||||
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" |
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
|
||||
<GuipButton type="ignore" :btnstyle="{width:'133px'}"> |
|
||||
<!-- <img src="@/assets/site/uploadIcon.svg" alt="" > --> |
|
||||
<div class="bgImg"></div> |
|
||||
上传二维码</GuipButton> |
|
||||
</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 class="flex mt12"> |
|
||||
<img v-if="imageUrl1" :src="imageUrl1" class="kefuImg"> |
|
||||
<img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg"> |
|
||||
<div class="qqCode-wrap right"> |
|
||||
<el-upload class="avatar-uploader" accept=".jpg,.png" |
|
||||
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" |
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
|
||||
<GuipButton type="ignore" :btnstyle="{width:'118px'}"> |
|
||||
<!-- <img src="@/assets/site/uploadIcon.svg" alt="" > --> |
|
||||
<div class="bgImg"></div> |
|
||||
重新上传 |
|
||||
</GuipButton> |
|
||||
</el-upload> |
|
||||
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane label="报告页客服" name="2"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<p class="flex-left-desc">微信客服</p> |
|
||||
<div class="flex mt12"> |
|
||||
<img v-if="imageUrl2" :src="imageUrl2" class="kefuImg"> |
|
||||
<img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg"> |
|
||||
<div class="qqCode-wrap right"> |
|
||||
<el-upload class="avatar-uploader" accept=".jpg,.png" |
|
||||
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" |
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
|
||||
<GuipButton type="ignore" :btnstyle="{width:'118px'}"> |
|
||||
<!-- <img src="@/assets/site/uploadIcon.svg" alt="" > --> |
|
||||
<div class="bgImg"></div> |
|
||||
重新上传 |
|
||||
</GuipButton> |
|
||||
</el-upload> |
|
||||
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex-line borderNone"></div> |
|
||||
<div class="flex-right"></div> |
|
||||
</div> |
|
||||
|
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane label="支付账单客服" name="3"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<p class="flex-left-desc">客服微信号</p> |
|
||||
<GuipInput ref="GuipInput" class="mt12 mb24" width="100%" |
|
||||
v-model="personalForm8.checkNum1" placeholder="请填写"> |
|
||||
</GuipInput> |
|
||||
</div> |
|
||||
<div class="flex-line borderNone"></div> |
|
||||
<div class="flex-right"></div> |
|
||||
</div> |
|
||||
</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 class="flex">服务列表页价格 |
|
||||
<GuipToolTip content="----居中----"> |
|
||||
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> |
|
||||
</GuipToolTip> |
|
||||
</span> |
|
||||
<GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示" |
|
||||
inactiveText="隐藏" @change="onSwitchChange"> |
|
||||
</GuipSwitch> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="left-pay-item "> |
|
||||
<div class="flex-between"> |
|
||||
<span class="flex">服务提交页价格 |
|
||||
<GuipToolTip content="----居中----"> |
|
||||
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> |
|
||||
</GuipToolTip> |
|
||||
</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 class="flex">服务列表页价格 |
|
||||
<GuipToolTip content="----居中----"> |
|
||||
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> |
|
||||
</GuipToolTip> |
|
||||
</span> |
|
||||
<GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示" |
|
||||
inactiveText="隐藏" @change="onSwitchChange"> |
|
||||
</GuipSwitch> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="left-pay-item "> |
|
||||
<div class="flex-between"> |
|
||||
<span class="flex">服务提交页价格 |
|
||||
<GuipToolTip content="----居中----"> |
|
||||
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> |
|
||||
</GuipToolTip> |
|
||||
</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分钟内不可提交重复内容</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分钟内不可提交重复内容</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" class="mt12" 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 { mapState } from 'vuex'; |
|
||||
import store from '../store'; |
|
||||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|
||||
import GuipToolTip from '@/components/GuipToolTip.vue'; |
|
||||
import GuipButton from '@/components/GuipButton.vue'; |
|
||||
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|
||||
|
|
||||
export default { |
|
||||
// 站点设置 |
|
||||
name: '', |
|
||||
props: [''], |
|
||||
components: { |
|
||||
GuipInput, |
|
||||
GuipButton, |
|
||||
GuipSwitch, |
|
||||
GuipToolTip, |
|
||||
GroupFormBtns |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
textObj: { |
|
||||
'1': '展示在网站右侧悬浮栏的客服，请至少设置1个', |
|
||||
'2': '展示在报告页右侧悬浮栏的客服，请至少设置1个', |
|
||||
'3': '显示在微信、支付宝账单详情中，方便用户联系' |
|
||||
}, |
|
||||
activeName: '1', |
|
||||
checkList1: ['识别重复辅助信息'], |
|
||||
checkList: ['识别重复正文'], |
|
||||
// 在线客服 |
|
||||
personalForm3: { |
|
||||
weixinFlag1: false, |
|
||||
weixinFlag2: true, |
|
||||
weixinFlag3: true, |
|
||||
weixinFlag4: false |
|
||||
}, |
|
||||
personalForm7: { |
|
||||
weixinFlag3: true, |
|
||||
weixinFlag4: true, |
|
||||
}, |
|
||||
personalForm8: { |
|
||||
checkNum: 0, |
|
||||
}, |
|
||||
imageUrl1:'', |
|
||||
imageUrl2:'', |
|
||||
imageUrl3:'', |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
||||
}, |
|
||||
created(){ |
|
||||
store.commit('SET_CUSTOMIZE', true); |
|
||||
store.commit('SET_SLIDER_MENU','siteSettingData'); |
|
||||
}, |
|
||||
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.imageUrl1 = URL.createObjectURL(file.raw); |
|
||||
}, |
|
||||
beforeAvatarUpload(file) { |
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
|
||||
const isLt2M = file.size / 1024 / 1024 < 2; |
|
||||
|
|
||||
if (!isJPG) { |
|
||||
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); |
|
||||
} |
|
||||
if (!isLt2M) { |
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!'); |
|
||||
} |
|
||||
return isJPG && isLt2M; |
|
||||
}, |
|
||||
handleClick(tab, event) { |
|
||||
console.log(tab, event); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
// ::v-deep .el-tabs__item.is-active { |
|
||||
// letter-spacing: 0.08em; |
|
||||
// /* main/main_stardard */ |
|
||||
// color: #006AFF; |
|
||||
// font-weight: bold; |
|
||||
// } |
|
||||
|
|
||||
// ::v-deep .el-tabs__nav-wrap::after { |
|
||||
// content: none; |
|
||||
// } |
|
||||
|
|
||||
::v-deep .el-tabs__header { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.site-personal-wrap { |
|
||||
width: 100%; |
|
||||
|
|
||||
.siteMessage { |
|
||||
border-radius: 4px; |
|
||||
transition: all .5s; |
|
||||
border: 1px solid transparent; |
|
||||
} |
|
||||
|
|
||||
.siteMessage5_desc { |
|
||||
border-radius: 4px; |
|
||||
/* middle/middle_blue_1 */ |
|
||||
background: #F2F7FF; |
|
||||
/* middle/middle_blue_3 */ |
|
||||
border: 1px solid #BFDAFF; |
|
||||
padding: 8px 13px; |
|
||||
margin-bottom: 32px; |
|
||||
|
|
||||
img { |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.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%; |
|
||||
} |
|
||||
|
|
||||
.tem-home-bottom { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 22px 32px; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.tem-look { |
|
||||
margin-right: 36px; |
|
||||
} |
|
||||
|
|
||||
div { |
|
||||
display: flex; |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
.qqCode-wrap { |
|
||||
display: grid; |
|
||||
justify-items: start; |
|
||||
// justify-content: flex-start; |
|
||||
// text-align: left; |
|
||||
// flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.qqCode-wrap.right { |
|
||||
margin: 0 0 8px 12px; |
|
||||
} |
|
||||
|
|
||||
.avatar-desc { |
|
||||
/* regular/body3-Regular */ |
|
||||
/* 样式描述：辅助文字 */ |
|
||||
margin-top: 8px; |
|
||||
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 */ |
|
||||
} |
|
||||
} |
|
||||
.avatar-uploader{ |
|
||||
.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); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,567 +0,0 @@ |
|||||
<template> |
|
||||
<div class="site-sem-wrap min-flex-right"> |
|
||||
<div class="siteMessage flex-common" id="siteMessage11"> |
|
||||
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3> |
|
||||
<el-form ref="formRef" :model="semForm1"> |
|
||||
<div class="flex-wrap"> |
|
||||
<div class="flex-left"> |
|
||||
<GuipFormItem column="column" class="mb24" label="站点标题（T：title）"> |
|
||||
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%" |
|
||||
v-model="semForm1.title" placeholder="建议80字内"> |
|
||||
</GuipInput> |
|
||||
|
|
||||
</GuipFormItem> |
|
||||
<GuipFormItem column="column" label="站点关键词（K：keyword）"> |
|
||||
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea" |
|
||||
v-model="semForm1.keyWord"> |
|
||||
</GuipInput> |
|
||||
</GuipFormItem> |
|
||||
</div> |
|
||||
<div class="flex-line "></div> |
|
||||
<div class="flex-right"> |
|
||||
<GuipFormItem column="column" label="站点描述（D：description）"> |
|
||||
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea" |
|
||||
v-model="semForm1.desc"> |
|
||||
</GuipInput> |
|
||||
</GuipFormItem> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm1')" /> |
|
||||
</div> |
|
||||
<div class="siteMessage flex-common mt12" id="siteMessage12"> |
|
||||
<h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3> |
|
||||
<el-form ref="baiduRef" class="bidform baidu-form" :model="semFormbid1" v-if="bidList.includes('baidu')"> |
|
||||
<div class="semBidWrap"> |
|
||||
<h3 class="flex-between"> |
|
||||
<p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p> |
|
||||
<div class="flex close-bid point" @click="deleteBid('baidu')">删除<img |
|
||||
src="@/assets/register/close.svg" alt=""></div> |
|
||||
</h3> |
|
||||
<div class="baidu-wrap bidWrap"> |
|
||||
<div class="bidwrap-item"> |
|
||||
<div class="bidwrap-item-top mb24 flex"> |
|
||||
<img class="bid-item-img" src="@/assets/site/step_1.png" alt=""> |
|
||||
<div class="top-right column"> |
|
||||
<b>输入Token</b> |
|
||||
<p>百度创建转化追踪：转化类型选择“服务购买成功”，接入方式选择“线索API”，复制token，填入下方输入框。<img |
|
||||
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="bidwrap-item-bot flex"> |
|
||||
<div style="flex: 1;margin-right: 10px;"> |
|
||||
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.token" |
|
||||
placeholder="请输入Token" /> |
|
||||
</div> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','token')">确认</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="bidwrap-item"> |
|
||||
<div class="bidwrap-item-top mb24 flex"> |
|
||||
<img class="bid-item-img" src="@/assets/site/step_2.png" alt=""> |
|
||||
<div class="top-right column"> |
|
||||
<b>联调创建OCPC</b> |
|
||||
<p>创建转化追踪后：点击该条记录的“联调”，复制带有bd-vid的推广url，复制到下方输入框，点击按钮开始联调。<img |
|
||||
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="bidwrap-item-bot flex"> |
|
||||
<div style="flex: 1;margin-right: 10px;"> |
|
||||
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.url" |
|
||||
placeholder="请输入url" /> |
|
||||
</div> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','url')">开始联调 |
|
||||
</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<el-form class="bidform" ref="360Ref" :model="semFormbid2" v-if="bidList.includes('360')"> |
|
||||
<div class="semBidWrap"> |
|
||||
<h3 class="flex-between"> |
|
||||
<p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p> |
|
||||
<div class="flex close-bid point" @click="deleteBid('360')">删除<img |
|
||||
src="@/assets/register/close.svg" alt=""></div> |
|
||||
</h3> |
|
||||
<div class="baidu-wrap bidWrap"> |
|
||||
<div class="beforeNotice"> |
|
||||
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
|
||||
<p class="mt12 flex">1. <a href="" class="flex"> <img |
|
||||
src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台</p> |
|
||||
<p class="mt10 flex">2. <a href="" class="flex"> <img |
|
||||
src="@/assets/site/form_linkActive.svg" |
|
||||
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。</p> |
|
||||
</div> |
|
||||
<div class="bidwrap-item"> |
|
||||
<div class="column"> |
|
||||
<p class="common_title">AppKey 和 AppSecret </p> |
|
||||
<p class="common_text mt10 mb24" style="text-align: left;">点击前期准备事项第2步页面中的【投放说明】按钮，选择【API回传】，点击【获取Key&Secret】，将 AppKey 和 AppSecret 填入表中保存即可</p> |
|
||||
</div> |
|
||||
<div class="biditem360 mb24 flex"> |
|
||||
<img class="bid-item-img" src="@/assets/site/step_1.png" alt=""> |
|
||||
<b>AppKey</b> |
|
||||
<div style="flex: 1;margin-right: 10px;"> |
|
||||
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appKey" |
|
||||
placeholder="请输入" /> |
|
||||
</div> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" |
|
||||
@click="semFormConmit('360','appKey')">确认</GuipButton> |
|
||||
</div> |
|
||||
<div class="biditem360 mb24 flex"> |
|
||||
<img class="bid-item-img" src="@/assets/site/step_2.png" alt=""> |
|
||||
<b>AppSecret</b> |
|
||||
<div style="flex: 1;margin-right: 10px;"> |
|
||||
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appSecret" |
|
||||
placeholder="请输入" /> |
|
||||
</div> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" |
|
||||
@click="semFormConmit('360','appSecret')">确认</GuipButton> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<el-form ref="formRef" class="bidform tcpr-wrap" :model="semFormbid3" v-if="bidList.includes('mast')"> |
|
||||
<div class="semBidWrap"> |
|
||||
<h3 class="flex-between"> |
|
||||
<p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p> |
|
||||
<div class="flex close-bid point" @click="deleteBid('360')">删除<img |
|
||||
src="@/assets/register/close.svg" alt=""></div> |
|
||||
</h3> |
|
||||
<div class="baidu-wrap bidWrap"> |
|
||||
<div class="beforeNotice"> |
|
||||
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
|
||||
<p class="mt12 flex"><i>1.</i> <a href="" class="flex"> <img |
|
||||
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。 |
|
||||
</p> |
|
||||
<p class="mt10 flex"><i>2.</i> <a href="" class="flex"> <img |
|
||||
src="@/assets/site/form_linkActive.svg" |
|
||||
alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序</p> |
|
||||
<div> |
|
||||
<p>名称：填写应用名称</p> |
|
||||
<p>受支持的帐户类型：选择 任何组织目录(任何 Microsoft Entra ID 租户 - 多租户)中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox)</p> |
|
||||
<p>重定向URI：忽略</p> |
|
||||
<p>点击：注册</p> |
|
||||
</div> |
|
||||
<p class="mt10"><i>3.</i> <span>应用配置，返回应用列表，在应用列表点击刚创建的应用，然后在应用概览页点击“添加重定向URI”->点击添加平台，选择移动和桌面应用程序->自定义重定向 URI， |
|
||||
<b>https://www.kuailelunwen.com/callback/microsoft_callback <img class="point" src="@/assets/site/form_copy.svg" alt=""></b></span> |
|
||||
|
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="bidwrap-item"> |
|
||||
<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>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex"> |
|
||||
<span :class="'yesSet'">已设置</span> |
|
||||
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }" |
|
||||
@click="manageDialog('configAppInfo')">管理设置</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>配置离线转化信息</b> |
|
||||
<p class="flex"><a href="" class="flex"> <img |
|
||||
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex"> |
|
||||
<span :class="'notSet'">未设置</span> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|
||||
@click="manageDialog('configOffline')">立即设置</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>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex"> |
|
||||
<span :class="'notSet'">未设置</span> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|
||||
@click="manageDialog('createOffline')">立即设置</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="biditemMast flex-between"> |
|
||||
<div class="bidwrap-item-top flex"> |
|
||||
<img class="bid-item-img" src="@/assets/site/step_4.png" alt=""> |
|
||||
<div class="top-right column"> |
|
||||
<b>登陆微软云</b> |
|
||||
<p>确认前3步完成，点击右侧“登录”按钮，登录微软云。 </p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex"> |
|
||||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|
||||
@click="manageDialog('login')">登录</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
<div class="addStore flex" @click="addBid"> |
|
||||
<div></div> |
|
||||
增加搜索竞价 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="siteMessage flex-common mt12" id="siteMessage13"> |
|
||||
<h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3> |
|
||||
<el-form ref="formRef" :model="semForm3"> |
|
||||
<GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="semForm3.code"> |
|
||||
</GuipInput> |
|
||||
</el-form> |
|
||||
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" /> |
|
||||
</div> |
|
||||
<GuipDialog type="normal" width="457px" :dialogVisible="dialogVisibleBid" title="增加搜索竞价" :show-close-button="false" |
|
||||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirm" @cancel="handleCancel" |
|
||||
@dialogVisibleChange="dialogVisibleChange"> |
|
||||
<el-radio-group v-model="bidAddRadio" class=" mt12 column" @input="radioChange"> |
|
||||
<!-- <div style="margin-top: 16px;" class="column radio-wrap"> --> |
|
||||
<el-radio class="mb24" v-for="key in Object.keys(bidAddList)" :disabled="bidList.includes(key)" |
|
||||
:key="key" :label="key">{{ |
|
||||
bidAddList[key] }}{{ bidList.includes(key) ? '（已添加）' : '' }}</el-radio> |
|
||||
<!-- </div> --> |
|
||||
</el-radio-group> |
|
||||
</GuipDialog> |
|
||||
<GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false" |
|
||||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig" @cancel="handleCancelConfig" |
|
||||
@dialogVisibleChange="dialogVisibleChange"> |
|
||||
<ConfigOffLineConversion v-if="configType == 'configOffline'"/> |
|
||||
<ConfigAppInformation v-if="configType == 'configAppInfo'"/> |
|
||||
<CreateOffLine v-if="configType == 'createOffline'"/> |
|
||||
</GuipDialog> |
|
||||
</div> |
|
||||
|
|
||||
</template> |
|
||||
<script> |
|
||||
import GuipInput from '@/components/GuipInput.vue'; |
|
||||
import { mapState } from 'vuex'; |
|
||||
import store from '../store'; |
|
||||
// import GuipButton from '@/components/GuipButton.vue'; |
|
||||
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|
||||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|
||||
import GuipDialog from '@/components/GuipDialog.vue'; |
|
||||
import GuipButton from '@/components/GuipButton.vue'; |
|
||||
import ConfigOffLineConversion from '@/components/site/ConfigOffLineConversion.vue'; |
|
||||
import ConfigAppInformation from '@/components/site/ConfigAppInformation.vue'; |
|
||||
import CreateOffLine from '@/components/site/CreateOffLine.vue'; |
|
||||
|
|
||||
export default { |
|
||||
// 站点设置 |
|
||||
name: '', |
|
||||
props: [''], |
|
||||
components: { |
|
||||
CreateOffLine, |
|
||||
ConfigAppInformation, |
|
||||
ConfigOffLineConversion, |
|
||||
GuipInput, |
|
||||
GuipFormItem, |
|
||||
GuipButton, |
|
||||
GroupFormBtns, |
|
||||
GuipDialog |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
configType:'configAppInfo', |
|
||||
diaTitle:'配置应用信息', |
|
||||
bidList: ['baidu', '360', 'mast'], |
|
||||
bidAddRadio: '', |
|
||||
bidAddList: { |
|
||||
'baidu': '百度OCPC竞价', |
|
||||
'360': '360OCPC竞价', |
|
||||
'mast': '必应TCPA竞价', |
|
||||
}, |
|
||||
configTitle:{ |
|
||||
createOffline:'创建离线转化', |
|
||||
configOffline:'配置离线转化信息', |
|
||||
configAppInfo:'配置应用信息', |
|
||||
}, |
|
||||
dialogVisibleBid: false, |
|
||||
dialogVisibleConfig: false, |
|
||||
semForm1: { |
|
||||
title: '', |
|
||||
keyWord: '', |
|
||||
desc: '' |
|
||||
}, |
|
||||
semForm2: { |
|
||||
title: '', |
|
||||
keyWord: '', |
|
||||
desc: '' |
|
||||
}, |
|
||||
semForm3: { |
|
||||
code: '', |
|
||||
}, |
|
||||
semFormbid1: { |
|
||||
token: '', |
|
||||
url: '' |
|
||||
|
|
||||
}, |
|
||||
semFormbid2: { |
|
||||
appKey: '', |
|
||||
appSecret: '' |
|
||||
}, |
|
||||
|
|
||||
semFormbid3: { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
||||
}, |
|
||||
mounted() { |
|
||||
store.commit('SET_PAGETITLE', '营销推广'); |
|
||||
}, |
|
||||
methods: { |
|
||||
addBid() { |
|
||||
this.dialogVisibleBid = true; |
|
||||
}, |
|
||||
semFormConmit(type,key) { |
|
||||
console.log(key, 'key---'); |
|
||||
}, |
|
||||
radioChange(data) { |
|
||||
console.log(data, 'radio--data'); |
|
||||
}, |
|
||||
cancelClick() { |
|
||||
|
|
||||
console.log('quxiao'); |
|
||||
}, |
|
||||
confirmClick(type) { |
|
||||
console.log(type, '确认'); |
|
||||
}, |
|
||||
// 确认按钮事件 |
|
||||
handleConfirm() { |
|
||||
this.$message.success('点击了确认按钮'); |
|
||||
this.dialogVisibleBid = false; |
|
||||
}, |
|
||||
// 取消按钮事件 |
|
||||
handleCancel() { |
|
||||
this.$message.warning('点击了取消按钮'); |
|
||||
this.dialogVisibleBid = false; |
|
||||
}, |
|
||||
manageDialog(type){ |
|
||||
this.configType = type; |
|
||||
this.dialogVisibleConfig = true; |
|
||||
this.diaTitle = this.configTitle[type] |
|
||||
}, |
|
||||
// 确认按钮事件 |
|
||||
handleConfirmConfig() { |
|
||||
this.$message.success('点击了确认按钮'); |
|
||||
this.dialogVisibleConfig = false; |
|
||||
}, |
|
||||
// 取消按钮事件 |
|
||||
handleCancelConfig() { |
|
||||
this.$message.warning('点击了取消按钮'); |
|
||||
this.dialogVisibleConfig = false; |
|
||||
}, |
|
||||
dialogVisibleChange(data) { |
|
||||
console.log(data, 'data098908090'); |
|
||||
}, |
|
||||
deleteBid(type) { |
|
||||
let index = this.bidList.indexOf(type) |
|
||||
this.bidList.splice(index, index + 1) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style scoped lang="scss"> |
|
||||
.site-sem-wrap { |
|
||||
width: 100%; |
|
||||
letter-spacing: 0.08em; |
|
||||
} |
|
||||
|
|
||||
.notSet,.yesSet { |
|
||||
margin-right: 12px; |
|
||||
color: #FF4D4F; |
|
||||
} |
|
||||
|
|
||||
.yesSet { |
|
||||
color: #00C261; |
|
||||
} |
|
||||
.bidform { |
|
||||
&:nth-child(even) { |
|
||||
margin: 32px 0; |
|
||||
} |
|
||||
} |
|
||||
.baidu-form{ |
|
||||
.bidwrap-item{ |
|
||||
margin-bottom: 18px; |
|
||||
} |
|
||||
} |
|
||||
.beforeNotice { |
|
||||
|
|
||||
h4 { |
|
||||
margin: 0; |
|
||||
gap: 8px; |
|
||||
} |
|
||||
|
|
||||
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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.biditem360 { |
|
||||
b { |
|
||||
display: inline-block; |
|
||||
width: 80px; |
|
||||
text-align: left; |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.addStore { |
|
||||
margin-top: 24px; |
|
||||
// transition: all .3s; |
|
||||
// &:active{ |
|
||||
// opacity: 0.7; |
|
||||
// } |
|
||||
// div{ |
|
||||
// width: 16px; |
|
||||
// height: 16px; |
|
||||
// background-image: url(../assets/addIcon.svg); |
|
||||
// margin-right: 12px; |
|
||||
// } |
|
||||
// &:hover{ |
|
||||
// div{ |
|
||||
// background-image: url(../assets/addIcon_light.svg); |
|
||||
// } |
|
||||
// border-color: #006AFF; |
|
||||
// color: #006AFF; |
|
||||
// } |
|
||||
} |
|
||||
|
|
||||
.radio-wrap {} |
|
||||
.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; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,70 +0,0 @@ |
|||||
<template> |
|
||||
<div class="siteSetting-wrap"> |
|
||||
<!-- <SetLeftMenu /> --> |
|
||||
<SliderMenu :menuData="siteSettingData" :customize="true"></SliderMenu> |
|
||||
|
|
||||
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" --> |
|
||||
<!-- 主内容区域 --> |
|
||||
<main class="main-content" ref="scrollContainer" id="main-content"> |
|
||||
<!-- 面包屑 位置 --> |
|
||||
|
|
||||
<PageTitle v-if="path !='/siteSetting/siteSem'" className="min-flex-right"/> |
|
||||
|
|
||||
<router-view></router-view> |
|
||||
<Footer></Footer> |
|
||||
</main> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
// import SiteBaseSetting from './SiteBaseSetting.vue'; |
|
||||
import PageTitle from '@/components/PageTitle.vue'; |
|
||||
import Footer from '@/components/Footer.vue'; |
|
||||
import { mapState } from 'vuex'; |
|
||||
|
|
||||
import SliderMenu from '@/components/SliderMenu.vue' |
|
||||
export default { |
|
||||
// 站点设置 |
|
||||
name: '', |
|
||||
props: [''], |
|
||||
components: { |
|
||||
PageTitle, |
|
||||
Footer, |
|
||||
SliderMenu, |
|
||||
// SiteBaseSetting |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
path:'' |
|
||||
} |
|
||||
}, |
|
||||
mounted(){ |
|
||||
this.path =this.$route.path; |
|
||||
console.log(this.$route.path,'090-9090'); |
|
||||
// this.$refs.scrollContainer.scrollTo(0) |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapState(['siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped lang="scss"> |
|
||||
.siteSetting-wrap { |
|
||||
display: flex; |
|
||||
height: calc(100vh - 62px); |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
|
|
||||
// .sidebar { |
|
||||
// width: 250px; |
|
||||
// background: #f5f5f5; |
|
||||
// padding: 20px; |
|
||||
// } |
|
||||
|
|
||||
.main-content { |
|
||||
flex: 1; |
|
||||
padding: 12px; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue