You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
699 lines
17 KiB
699 lines
17 KiB
<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">
|
|
<b>{{ item.num }} <span>元</span></b>
|
|
<span>{{ 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>我想将商品绑定淘宝店应该怎么做？</p>
|
|
<p>基于成交量的推广支持</p>
|
|
<p>二级、裂变分销，发展代理网络</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;
|
|
|
|
.hoverCommon {
|
|
&:hover {
|
|
color: #006AFF !important;
|
|
}
|
|
}
|
|
|
|
.home-main {
|
|
width: 100%;
|
|
display: flex;
|
|
/* 使用 flex 布局 */
|
|
gap: 12px;
|
|
/* 两个盒子之间的间隔 */
|
|
min-width: 1018px;
|
|
/* 父元素最小宽度 */
|
|
max-width: 1750px;
|
|
/* 父元素最大宽度 */
|
|
margin: 0 auto;
|
|
/* 水平居中 */
|
|
align-items: stretch;
|
|
// padding: 0 12px; /* 左右内边距，避免内容贴边 */
|
|
box-sizing: border-box;
|
|
|
|
/* 确保 padding 不会影响宽度计算 */
|
|
.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;
|
|
// display: -webkit-box;
|
|
// -webkit-line-clamp: 1;
|
|
/* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
|
|
-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;
|
|
|
|
&:hover {
|
|
border-radius: 8px;
|
|
/* middle/middle_grey_1 */
|
|
background: #F6F7FA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.supplyPrice-main {
|
|
display: flex;
|
|
/* 使用 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%);
|
|
/* middle/middle_line_1 */
|
|
border: 1px solid #DFE2E6;
|
|
|
|
&:hover {
|
|
transition: all .5s;
|
|
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 60%);
|
|
}
|
|
}
|
|
|
|
.supplyPric-item2 {
|
|
background: linear-gradient(180deg, #FFFAF6 1%, rgba(255, 255, 255, 0.6233) 14%);
|
|
/* middle/middle_line_1 */
|
|
border: 1px solid #DFE2E6;
|
|
|
|
&:hover {
|
|
transition: all .5s;
|
|
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%);
|
|
/* middle/middle_line_1 */
|
|
border: 1px solid #DFE2E6;
|
|
|
|
&:hover {
|
|
transition: all .5s;
|
|
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: D-DIN;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
line-height: 27px;
|
|
letter-spacing: normal;
|
|
color: #1F2026;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
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;
|
|
|
|
&:hover {
|
|
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;
|
|
|
|
.systemIcon {
|
|
display: none;
|
|
width: 12px;
|
|
height: 8px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: #1F2026;
|
|
}
|
|
|
|
&:hover {
|
|
.systemIcon {
|
|
display: block;
|
|
}
|
|
|
|
span {
|
|
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>
|
|
|