1
This commit is contained in:
yiqiuyang
291
src/views/product/softwareSystem/mobile.vue
Normal file
291
src/views/product/softwareSystem/mobile.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
|
||||
// 使用PC端真实数据源 - 软件系统列表
|
||||
const softwareList = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
// 从window对象获取真实数据
|
||||
softwareList.value = window.softwareSystemList || []
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300)
|
||||
})
|
||||
|
||||
// 点击图片跳转详情页
|
||||
const toDetail = (item) => {
|
||||
router.push({
|
||||
path: '/product/detail',
|
||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-software" v-loading="loading">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">软件系统</h1>
|
||||
<p class="page-subtitle">智能化低空监管软件平台</p>
|
||||
</div>
|
||||
|
||||
<!-- 软件系统列表 -->
|
||||
<div class="software-list" v-if="softwareList.length > 0">
|
||||
<div
|
||||
v-for="software in softwareList"
|
||||
:key="software.id"
|
||||
class="software-card"
|
||||
>
|
||||
<!-- 标题栏 -->
|
||||
<div class="card-header-bar">
|
||||
<h3 class="software-title">{{ software.title }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 图片区域（可点击） -->
|
||||
<div class="image-area" @click="toDetail(software)">
|
||||
<img :src="`./static/images/${software.imgUrl}`" :alt="software.title" class="software-image" />
|
||||
<div class="image-overlay">
|
||||
<span class="view-detail">
|
||||
<el-icon><View /></el-icon>
|
||||
查看详情
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 描述信息 -->
|
||||
<div class="card-body">
|
||||
<!-- 副标题 -->
|
||||
<p class="sub-title" v-if="software.subTitle">{{ software.subTitle }}</p>
|
||||
|
||||
<!-- 详细描述 -->
|
||||
<div class="description" v-if="software.desc || software.description">
|
||||
<p>{{ software.desc || software.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 功能特性标签 -->
|
||||
<div class="features" v-if="software.features && software.features.length > 0">
|
||||
<span v-for="(feat, idx) in software.features" :key="idx" class="feature-tag">
|
||||
{{ feat }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 查看详情按钮 -->
|
||||
<button class="detail-btn" @click="toDetail(software)">
|
||||
<span>了解更多</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div v-else class="empty-state">
|
||||
<el-icon :size="64" color="#cccccc"><Monitor /></el-icon>
|
||||
<p>暂无软件系统信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {View, ArrowRight, Monitor} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-software {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
|
||||
padding: 24px 16px;
|
||||
color: #ffffff;
|
||||
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.software-list {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px; /* no */
|
||||
}
|
||||
|
||||
.software-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
|
||||
|
||||
.card-header-bar {
|
||||
background: linear-gradient(135deg, #0389ff, #0066cc);
|
||||
padding: 14px 16px; /* no */
|
||||
|
||||
.software-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 240px; /* no */
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.software-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background-color: #fafafa;
|
||||
padding: 12px; /* no */
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active .software-image {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
|
||||
padding: 20px 16px 12px; /* no */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.view-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px; /* no */
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px; /* no */
|
||||
|
||||
.sub-title {
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 14px; /* no */
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px; /* no */
|
||||
margin-bottom: 16px; /* no */
|
||||
|
||||
.feature-tag {
|
||||
padding: 5px 12px; /* no */
|
||||
background-color: #e6f7ff;
|
||||
color: #096dd9;
|
||||
font-size: 11px;
|
||||
border-radius: 12px; /* no */
|
||||
border: 1px solid #d6e4ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
width: 100%;
|
||||
height: 42px; /* no */
|
||||
border: none;
|
||||
border-radius: 21px; /* no */
|
||||
background: linear-gradient(135deg, #081314, #1a2634);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px; /* no */
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(8, 19, 20, 0.25); /* no */
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 2px 8px rgba(8, 19, 20, 0.35); /* no */
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active .el-icon {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px; /* no */
|
||||
color: #999999;
|
||||
|
||||
p {
|
||||
margin-top: 16px; /* no */
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user