172 lines
3.5 KiB
Vue
172 lines
3.5 KiB
Vue
<script setup>
|
||
import {ref, onMounted, shallowRef, watchEffect} from 'vue'
|
||
import {useRoute, useRouter} from 'vue-router'
|
||
import {cryptoDecrypt} from '@/utils/cryptojs.js'
|
||
|
||
const advantages = window.advantages
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const query = JSON.parse(cryptoDecrypt(route.query.type))
|
||
|
||
const videoLoaded = ref(false)
|
||
|
||
onMounted(() => {
|
||
videoLoaded.value = query.type !== 'softwareSystem' ? false : true
|
||
})
|
||
|
||
function onVideoLoaded() {
|
||
videoLoaded.value = false
|
||
}
|
||
|
||
const toBack = () => {
|
||
router.back()
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page flex column a-c" v-loading="videoLoaded">
|
||
<h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
|
||
|
||
<!-- 硬件内容 -->
|
||
<template v-if="query.type === 'hardwareSystem'">
|
||
<div class="content flex j-s hardware">
|
||
<img class="img" :src="`./static/images/${query.imgUrl}`" alt="" />
|
||
<div class="text">
|
||
<h4 class="title">核心优势：</h4>
|
||
<div v-html="advantages"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="descripition">
|
||
<div v-html="query.description"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 软件 -->
|
||
<template v-else>
|
||
<div class="content software flex">
|
||
<video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
|
||
<source :src="`./static/video/${query.video}`" type="video/mp4" />
|
||
</video>
|
||
<div class="descripition">
|
||
<div v-html="query.description"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-list flex j-c a-c wrap">
|
||
<div class="card" v-for="item in query.card" :key="item.id">
|
||
<h4 class="title">{{ item.title }}</h4>
|
||
<div class="content">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="back" @click="toBack">返回</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.hardware) {
|
||
font-size: 20px;
|
||
line-height: 1.8;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.label {
|
||
margin: 40px 0 0 0;
|
||
font-family: 'PingFang SC';
|
||
font-weight: 500;
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: $black;
|
||
}
|
||
|
||
.time {
|
||
margin-bottom: 40px;
|
||
}
|
||
.content {
|
||
margin-top: 40px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.hardware {
|
||
width: 1300px;
|
||
.img {
|
||
width: 550px;
|
||
height: 550px;
|
||
}
|
||
.text {
|
||
font-size: 24px;
|
||
line-height: 5ex;
|
||
.title {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.software {
|
||
width: 1700px;
|
||
align-items: flex-start;
|
||
video {
|
||
width: 65%;
|
||
height: auto;
|
||
margin-right: 40px;
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
width: 1200px;
|
||
height: 100%;
|
||
.card {
|
||
width: 350px;
|
||
height: 300px;
|
||
margin: 20px;
|
||
text-align: center;
|
||
border-radius: $border_radius;
|
||
transition: all 0.3s ease-in-out;
|
||
border: 1px solid #eee;
|
||
cursor: pointer;
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.title {
|
||
background-color: #0389ff;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
border-radius: $border_radius $border_radius 0 0;
|
||
}
|
||
.content {
|
||
font-size: 18px;
|
||
padding: 0 20px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 6;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.descripition {
|
||
width: 1000px;
|
||
}
|
||
|
||
.back {
|
||
margin-top: 40px;
|
||
padding: 10px 40px;
|
||
background: #0389ff;
|
||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||
border-radius: 16px;
|
||
margin-bottom: 60px;
|
||
font-size: 20px;
|
||
color: $white;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|