602 lines
14 KiB
Vue
602 lines
14 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<div id="topContainer"
|
||
style="min-width: 1400px; width: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center">
|
||
<div class="banner">
|
||
<img src="./img/detailBg.jpg" alt="">
|
||
<div class="content">
|
||
<span class="title">{{ detailData.title }}</span>
|
||
<p style="line-height: 1.6" class="description">{{ detailData.description }}</p>
|
||
<span @click="openTalk" class="btnStyle">立即咨询</span>
|
||
</div>
|
||
</div>
|
||
<!-- 产品优势 -->
|
||
<div class="proAd">
|
||
<div v-show="detailData.title === '裸金属产品'" class="title">产品规格</div>
|
||
|
||
<div v-show="detailData.title === '裸金属产品'" class="cardBox">
|
||
<div class="card">
|
||
<ul class="cardUl">
|
||
<!-- ::{{ JSON.stringify(detailData) }} -->
|
||
<li class="cardLi" v-for="(i, index) in detailData.products" :key="index">
|
||
<span class="title"> {{ i.title }}</span>
|
||
<ul class="tagUl">
|
||
<li v-for="(item,index) in i.list" :key="index">
|
||
{{ item.name }}：{{ item.content }}
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="towBtn">
|
||
<span class="basePrice"><span style="font-weight: bold;">￥</span><span
|
||
style="font-weight: bold;font-size: 48px">{{ i.price }}</span> <span
|
||
style="color: #7A82A0">/{{ i.price_unit }}</span><span style="color: #222F60">（可短租）</span></span>
|
||
<span @click="openTalk" class="zixun">立即咨询</span>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div style="padding-top: 50px" v-if="detailData.title !== '裸金属产品'" class="title">产品优势</div>
|
||
<ul v-if="detailData.title !== '裸金属产品'" class="adUl">
|
||
<li v-for="(item, index) in detailData.adList" :key="index">
|
||
<div class="leftBox">
|
||
<img :src="item.img" alt="">
|
||
</div>
|
||
<div class="rightBox">
|
||
<span class="subTitle">{{ item.title }}</span>
|
||
<span class="subDescription">{{ item.description }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 产品功能-->
|
||
<div v-if="detailData.title !== '裸金属产品'" style="justify-content: flex-start!important;" class="proUse">
|
||
<div style="padding-top: 50px" class="title">产品功能</div>
|
||
<ul class="useUl">
|
||
<li v-for="(item, index) in detailData.useList" :key="index" class="useLi">
|
||
<span v-if="item.title" class="useTitle">{{ item.title }}</span>
|
||
<span v-if="item.description" class="useDescription">{{ item.description }}</span>
|
||
<ul class="inUl">
|
||
<li :style="{ justifyContent: i.description ? 'space-around' : 'center' }" v-for="(i, d) in item.content"
|
||
:key="d" class="inLi">
|
||
<span class="inTitle" style="margin-bottom: 10px;font-size: 16px;">{{ i.title }}</span>
|
||
<span style="color: #666;line-height: 1.8;font-size: 14px" class="inDescription">{{
|
||
i.description
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Application-->
|
||
<div v-if="detailData.title !== '裸金属产品'" class="application">
|
||
<div class="title">应用场景</div>
|
||
<ul class="menu">
|
||
<li v-for="(item, index) in detailData.applicationList" :key="index" @click="clickMenu(item)"
|
||
:class="activeMenu === item.id ? 'activeLi' : ''">
|
||
{{ item.memuName }}
|
||
</li>
|
||
</ul>
|
||
<div class="realApp">
|
||
<div style="display: none" class="leftBox">
|
||
<img :src="menuObj.img" alt="">
|
||
</div>
|
||
<div class="rightBox">
|
||
<div v-if="menuObj.title_r" class="topBox">
|
||
<span class="topTitle">{{ menuObj.title_r }}</span>
|
||
<span style="line-height: 2" class="topDEscription">{{ menuObj.description_r }}</span>
|
||
</div>
|
||
<div class="boxBox">
|
||
|
||
<div v-for="(item, index) in menuObj.provide" class="bottomBox">
|
||
<span style="margin: 15px 0">{{ item.title }}</span>
|
||
<span class="content">{{ item.content }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Talk></Talk>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Vue from 'vue'
|
||
// import {detailData} from "@/views/homePage/detail/data";
|
||
import { reqHotProduct, reqNewHomeDetail } from "@/api/newHome";
|
||
import Talk from "@/views/homePage/dialog/talk/index.vue";
|
||
|
||
|
||
export default Vue.extend({
|
||
name: "detail",
|
||
// computed: {
|
||
// luojinshuData() {
|
||
// return luojinshuData
|
||
// }
|
||
// },
|
||
components: { Talk },
|
||
// computed: {
|
||
// detailData() {
|
||
// return detailData
|
||
// }
|
||
// },
|
||
data() {
|
||
return {
|
||
loading: null,
|
||
activeMenu: 0,
|
||
detailData: {},
|
||
menuObj: {
|
||
id: "13",
|
||
memuName: "个人建站应用、专属空间 ",
|
||
img: "https://vstecscloud-file-manage.eos-beijing-4.cmecloud.cn/blade-oss/e7d1d90e439246d7879b1c1f8974f376@:,_y3.png",
|
||
title_r: "知识效率管理，工具垂手可得",
|
||
description_r: "选择精品镜像创建个人网站，企业官网",
|
||
provide: {
|
||
title: "支持的系统镜像",
|
||
content: "WordPress、Lamp、Joomla、Drupal"
|
||
}
|
||
},
|
||
suan: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDetail()
|
||
this.initData()
|
||
|
||
},
|
||
watch: {
|
||
'$route'(to, from) {
|
||
// 当路由变化时，检查id是否变化
|
||
console.log("asdsad", to.query.id === '2113')
|
||
if (to.query.id === '2113') {
|
||
this.initData()
|
||
}
|
||
if (to.query.id !== from.query.id) {
|
||
this.getDetail();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
initData() {
|
||
reqHotProduct().then(res => {
|
||
if (res.status) {
|
||
|
||
this.suan = res.data.suan
|
||
this.suanItem = this.suan.hot
|
||
}
|
||
})
|
||
},
|
||
openTalk() {
|
||
this.$store.commit('setShowTalk', true)
|
||
},
|
||
openFullScreen2() {
|
||
this.loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
},
|
||
clickMenu(item) {
|
||
this.activeMenu = item.id
|
||
this.menuObj = item
|
||
},
|
||
getDetail() {
|
||
this.openFullScreen2()
|
||
reqNewHomeDetail({ id: this.$route.query.id }).then(res => {
|
||
this.loading.close()
|
||
this.detailData = res.data
|
||
this.activeMenu = res.data.applicationList[0].id
|
||
|
||
this.menuObj = res.data.applicationList[0]
|
||
})
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.banner {
|
||
width: 100%;
|
||
height: 375px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.content {
|
||
|
||
margin: 0 110px;
|
||
margin-top: 80px;
|
||
width: 1000px;
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.title {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.description {
|
||
color: #3d3d3d;
|
||
line-height: 2 !important;
|
||
}
|
||
|
||
.btnStyle {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
color: white;
|
||
padding: 8px 15px;
|
||
border-radius: 8px;
|
||
margin-top: 15px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
background: linear-gradient(90deg, #275AFF 0%, #1089c1 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.title {
|
||
margin: 15px 0;
|
||
font-size: 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.proAd {
|
||
max-width: 1250px;
|
||
width: 100%;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
|
||
|
||
.adUl {
|
||
margin-bottom: 80px;
|
||
background: url("./img/liBg.png");
|
||
background-position: center;
|
||
background-size: cover;
|
||
width: 100%;
|
||
min-width: 800px;
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
|
||
li {
|
||
margin: 15px 0;
|
||
|
||
width: 49%;
|
||
display: flex !important;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.leftBox {
|
||
width: 50px;
|
||
height: 50px;
|
||
padding: 10px;
|
||
min-width: 50px;
|
||
min-height: 50px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.rightBox {
|
||
|
||
padding-left: 25px;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
|
||
.subTitle {
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.subDescription {
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.proUse {
|
||
width: 100%;
|
||
min-width: 1400px;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
background: #f4f4f4;
|
||
|
||
.useUl {
|
||
height: fit-content;
|
||
margin-bottom: 25px;
|
||
width: 1400px;
|
||
//padding-bottom: 35px;
|
||
border-bottom: 1px solid rgba(228, 231, 237, 1);
|
||
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.useLi {
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
//padding-bottom: 45px;
|
||
|
||
|
||
.useTitle {
|
||
font-size: 18px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.useDescription {
|
||
font-size: 12px;
|
||
margin-bottom: 14px;
|
||
line-height: 2 !important;
|
||
|
||
}
|
||
}
|
||
|
||
.inUl {
|
||
width: 100%;
|
||
display: flex !important;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start !important;
|
||
|
||
li {
|
||
padding-right: 10px;
|
||
margin: 35px 0px;
|
||
width: 33% !important;
|
||
font-size: 12px;
|
||
padding-left: 15px;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: space-around;
|
||
align-items: flex-start;
|
||
min-height: 70px;
|
||
border-left: 2px solid #417ce6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.application {
|
||
background: white;
|
||
|
||
.menu {
|
||
width: 1250px;
|
||
display: flex !important;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
border: 1px solid #dcdfe6;
|
||
|
||
.activeLi {
|
||
|
||
color: #1b5bff;
|
||
border-top: 3px solid #1b5bff;
|
||
}
|
||
|
||
li {
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
flex: 1;
|
||
height: 50px;
|
||
border-right: 1px solid rgba(228, 231, 237, 1);
|
||
border-left: 1px solid #dcdfe6;
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
}
|
||
}
|
||
|
||
.realApp {
|
||
width: 1250px;
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
flex-wrap: nowrap !important;
|
||
|
||
.leftBox {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
width: 0;
|
||
//width: 620px;
|
||
height: 100%;
|
||
background: #e5e5e5;
|
||
|
||
}
|
||
|
||
.rightBox {
|
||
padding: 40px;
|
||
//width: calc(100% - 630px);
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1px solid #d8d8d8;
|
||
|
||
.topBox {
|
||
padding-bottom: 30px;
|
||
border-bottom: 1px solid rgba(216, 216, 216, 1);
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
|
||
.topTitle {
|
||
margin-top: 25px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.topDEscription {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
|
||
.bottomBox {
|
||
//padding-top: 30px;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
|
||
.content {
|
||
//padding-left: 15px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
padding-right: 25px;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardBox {
|
||
padding-bottom: 50px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.card {
|
||
border-radius: 12px !important;
|
||
width: 1400px;
|
||
background: url("./img/bg.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
}
|
||
|
||
.cardUl {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.cardLi {
|
||
height: 350px;
|
||
position: relative;
|
||
margin: 45px 0;
|
||
padding: 0 35px;
|
||
padding-bottom: 100px;
|
||
width: 45%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
background: white;
|
||
border-radius: 16px;
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tagUl {
|
||
width: 100%;
|
||
|
||
li {
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.zixun {
|
||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||
padding: 10px 20px;
|
||
border-radius: 12px;
|
||
color: white;
|
||
font-weight: bold;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.basePrice {
|
||
display: inline-block;
|
||
margin-top: 15px;
|
||
font-size: 16px;
|
||
color: #F62424;
|
||
|
||
* {
|
||
color: #F62424;
|
||
}
|
||
}
|
||
|
||
.towBtn {
|
||
position: absolute;
|
||
bottom: 15px;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
padding: 0 35px;
|
||
}
|
||
|
||
.boxBox {
|
||
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.bottomBox {
|
||
width: 50%;
|
||
}
|
||
}
|
||
</style>
|