小程序页面样式重构
This commit is contained in:
WindowBird
parent
43c81af3a7
commit
9b838635c0
|
|
@ -1,45 +1,54 @@
|
|||
<!--
|
||||
@MiniProgram.vue
|
||||
小程序开发服务页面组件
|
||||
功能：展示五大技术核心和七大保障服务
|
||||
特点：完全响应式设计，支持PC、平板、移动端
|
||||
作者：开发团队
|
||||
更新时间：2024
|
||||
-->
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useHead} from "#app";
|
||||
|
||||
// 页面元数据配置 - 使用无导航布局
|
||||
definePageMeta({
|
||||
layout: 'no-new'
|
||||
})
|
||||
|
||||
// 使用 Nuxt 3 的 useHead 来管理头部资源
|
||||
// 引入必要的CSS样式文件和JavaScript脚本
|
||||
useHead({
|
||||
link: [
|
||||
{rel: 'stylesheet', href: '/css/bootstrap.min.css'},
|
||||
{rel: 'stylesheet', href: '/css/main2.css'},
|
||||
{rel: 'stylesheet', href: '/css/yuxi2019.css'},
|
||||
{rel: 'stylesheet', href: '/css/computer_public.css'},
|
||||
{rel: 'stylesheet', href: '/css/headORfooter.css'},
|
||||
{rel: 'stylesheet', href: '/css/about.css'},
|
||||
|
||||
|
||||
// {rel: 'stylesheet', href: '/css/Internet_Things.css'}
|
||||
{rel: 'stylesheet', href: '/css/bootstrap.min.css'}, // Bootstrap框架样式
|
||||
{rel: 'stylesheet', href: '/css/main2.css'}, // 主要样式文件
|
||||
{rel: 'stylesheet', href: '/css/yuxi2019.css'}, // 宇熙2019主题样式
|
||||
{rel: 'stylesheet', href: '/css/computer_public.css'}, // 电脑端公共样式
|
||||
// {rel: 'stylesheet', href: '/css/headORfooter.css'} // 头部底部样式（已注释）
|
||||
],
|
||||
script: [
|
||||
|
||||
{src: '/js/index.js'},
|
||||
{src: '/js/gopcOm.js'}
|
||||
{src: '/js/index.js'}, // 主要JavaScript功能
|
||||
{src: '/js/gopcOm.js'} // PC端优化脚本
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 小程序开发服务页面主容器 -->
|
||||
<view class="full-width-container">
|
||||
|
||||
<view>
|
||||
|
||||
|
||||
<!-- 顶部背景横幅区域 -->
|
||||
<div class="developBack"/>
|
||||
|
||||
<!-- 五大技术核心展示区域 -->
|
||||
<div class="developC1">
|
||||
<div class="developC1_next">
|
||||
<!-- 区域标题 -->
|
||||
<div class="title">
|
||||
<span>五大技术核心</span>
|
||||
<li>Five core technology</li>
|
||||
<li class="p1"/>
|
||||
</div>
|
||||
<!-- 技术核心列表 -->
|
||||
<ul>
|
||||
<li><img src="/img/devel_web.png">
|
||||
<p>Web开发</p></li>
|
||||
|
|
@ -55,41 +64,515 @@ useHead({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="developC2">
|
||||
<div class="developC2_next">
|
||||
<div class="title">
|
||||
<!-- 七大保障服务展示区域 -->
|
||||
<div class="guarantee-section">
|
||||
<div class="guarantee-container">
|
||||
<!-- 区域标题 -->
|
||||
<div class="section-title">
|
||||
<span>七大保障</span>
|
||||
<li>Seven guarantee</li>
|
||||
<li class="p1"/>
|
||||
</div>
|
||||
<ul class="develop_qz">
|
||||
<li>平台系统是管理系统的一部分，在系统设计时尽可能照顾各方面的需要，在实现这些功能的时候，考虑下一步发展规划</li>
|
||||
</ul>
|
||||
<ul class="develop_aq">
|
||||
<li>有健全的安全防范措施，从硬件、软件以及行政管理等方面严格管理，保证产品源代码安全</li>
|
||||
</ul>
|
||||
<ul class="develop_sy">
|
||||
<li>打造高质量产品，对于各个场合都会有很强的实用性</li>
|
||||
</ul>
|
||||
|
||||
<ul class="develop_kk">
|
||||
<li>在网络设计时关键部位有高可靠性设备，对于重要的网络节点采用先进的高可靠性技术</li>
|
||||
</ul>
|
||||
<ul class="develop_kf">
|
||||
<li>网络系统开放性要好，支持多网络协议</li>
|
||||
</ul>
|
||||
<ul class="develop_bz">
|
||||
<li>
|
||||
在网络设备和系统平台选型时，符合国际网络标准及工业标准，使系统的硬件环境、通信环境、软件环境相互间依赖减至最小，使其各自发挥自身优势
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="develop_xj">
|
||||
<li>采用国际先进的互联网技术采用国际先进的网络技术模式采用国际先进的技术路线采用国际先进的体系结构</li>
|
||||
</ul>
|
||||
<!-- 保障服务项目网格 -->
|
||||
<div class="guarantee-grid">
|
||||
<!-- 1. 平台系统保障 -->
|
||||
<div class="guarantee-item guarantee-platform">
|
||||
<div class="guarantee-content">
|
||||
<p>
|
||||
平台系统是管理系统的一部分，在系统设计时尽可能照顾各方面的需要，在实现这些功能的时候，考虑下一步发展规划</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 安全防护保障 -->
|
||||
<div class="guarantee-item guarantee-security">
|
||||
<div class="guarantee-content">
|
||||
<p>有健全的安全防范措施，从硬件、软件以及行政管理等方面严格管理，保证产品源代码安全</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 实用性保障 -->
|
||||
<div class="guarantee-item guarantee-practical">
|
||||
<div class="guarantee-content">
|
||||
<p>打造高质量产品，对于各个场合都会有很强的实用性</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 可靠性保障 -->
|
||||
<div class="guarantee-item guarantee-reliability">
|
||||
<div class="guarantee-content">
|
||||
<p>在网络设计时关键部位有高可靠性设备，对于重要的网络节点采用先进的高可靠性技术</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. 开放性保障 -->
|
||||
<div class="guarantee-item guarantee-openness">
|
||||
<div class="guarantee-content">
|
||||
<p>网络系统开放性要好，支持多网络协议</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. 标准化保障 -->
|
||||
<div class="guarantee-item guarantee-standard">
|
||||
<div class="guarantee-content">
|
||||
<p>
|
||||
在网络设备和系统平台选型时，符合国际网络标准及工业标准，使系统的硬件环境、通信环境、软件环境相互依赖减至最小，使其各自发挥自身优势</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7. 先进性保障 -->
|
||||
<div class="guarantee-item guarantee-advanced">
|
||||
<div class="guarantee-content">
|
||||
<p>采用国际先进的互联网技术,采用国际先进的网络技术模式,采用国际先进的技术路线,采用国际先进的体系结构</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ===========================================
|
||||
@MiniProgram.vue 样式定义
|
||||
小程序开发服务页面样式
|
||||
特点：完全响应式设计，支持多设备适配
|
||||
=========================================== */
|
||||
|
||||
/* 主容器样式 - 全宽度布局 */
|
||||
.full-width-container {
|
||||
width: 100%;
|
||||
min-width: 1210px; /* PC端最小宽度 */
|
||||
}
|
||||
|
||||
/* 主容器响应式设计 */
|
||||
@media (max-width: 1199px) {
|
||||
.full-width-container {
|
||||
min-width: auto; /* 移除最小宽度限制 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部背景横幅区域 */
|
||||
.developBack {
|
||||
width: 100%;
|
||||
height: 780px; /* PC端高度 */
|
||||
background: url('/img/backimg5.jpg') no-repeat top center;
|
||||
background-size: cover; /* 背景图片自适应 */
|
||||
min-width: 1210px;
|
||||
}
|
||||
|
||||
/* 背景图响应式设计 */
|
||||
@media (max-width: 1199px) {
|
||||
.developBack {
|
||||
height: 600px; /* 中等屏幕高度 */
|
||||
min-width: auto; /* 移除最小宽度限制 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.developBack {
|
||||
height: 400px; /* 平板端高度 */
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.developBack {
|
||||
height: 300px; /* 手机端高度 */
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 五大技术核心区域容器 */
|
||||
.developC1 {
|
||||
width: 100%;
|
||||
height: 390px; /* PC端固定高度 */
|
||||
background: #fff;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 技术核心内容区域 */
|
||||
.developC1_next {
|
||||
width: 1210px; /* PC端固定宽度 */
|
||||
height: 390px;
|
||||
margin: 0 auto; /* 水平居中 */
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dcdcdc; /* 底部边框 */
|
||||
}
|
||||
|
||||
/* 技术核心列表样式 */
|
||||
.developC1_next ul {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* 技术核心列表项 - PC端5列布局 */
|
||||
.developC1_next ul li {
|
||||
width: 20%; /* 5列布局，每列20% */
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 技术核心图标样式 */
|
||||
.developC1_next ul li img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 技术核心文字样式 */
|
||||
.developC1_next ul li p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* 五大核心区域响应式设计 */
|
||||
@media (max-width: 1199px) {
|
||||
.developC1 {
|
||||
height: auto; /* 自适应高度 */
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.developC1_next {
|
||||
width: 90%; /* 响应式宽度 */
|
||||
max-width: 900px;
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.developC1_next ul {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.developC1_next ul li {
|
||||
width: 18%; /* 5列布局，稍微紧凑 */
|
||||
float: none;
|
||||
flex: 0 0 18%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.developC1 {
|
||||
margin-top: 40px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.developC1_next {
|
||||
width: 95%;
|
||||
padding: 30px 15px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.developC1_next ul {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.developC1_next ul li {
|
||||
width: 30%; /* 3列布局 */
|
||||
flex: 0 0 30%;
|
||||
}
|
||||
|
||||
.developC1_next ul li img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.developC1_next ul li p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.developC1 {
|
||||
margin-top: 30px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.developC1_next {
|
||||
width: 100%;
|
||||
padding: 20px 10px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.developC1_next ul {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.developC1_next ul li {
|
||||
width: 45%; /* 2列布局 */
|
||||
flex: 0 0 45%;
|
||||
}
|
||||
|
||||
.developC1_next ul li img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.developC1_next ul li p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 七大保障区域容器 - 新设计 */
|
||||
.guarantee-section {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-top: 95px;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
/* 保障内容区域 - 响应式容器 */
|
||||
.guarantee-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 保障项目网格布局 */
|
||||
.guarantee-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* 保障项目基础样式 */
|
||||
.guarantee-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 30px 25px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
min-height: 220px;
|
||||
max-height: 240px;
|
||||
max-width: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.guarantee-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 保障内容样式 */
|
||||
.guarantee-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guarantee-content p {
|
||||
padding-top: 90px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #505050;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 各个保障项目的图标样式 */
|
||||
.guarantee-platform {
|
||||
background-image: url('/img/devel_qz.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.guarantee-security {
|
||||
background-image: url('/img/devel_aq.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.guarantee-practical {
|
||||
background-image: url('/img/devel_sy.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.guarantee-reliability {
|
||||
background-image: url('/img/devel_kk.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.guarantee-openness {
|
||||
background-image: url('/img/devel_kf.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.guarantee-standard {
|
||||
background-image: url('/img/devel_bz.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.guarantee-advanced {
|
||||
background-image: url('/img/devel_xj.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 区域标题通用样式 */
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 主标题样式 */
|
||||
.title span,
|
||||
.section-title span {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 副标题样式 */
|
||||
.title li,
|
||||
.section-title li {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
list-style: none;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* 标题装饰线 */
|
||||
.section-title .p1 {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: #2563eb; /* 蓝色装饰线 */
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
响应式设计 - 媒体查询
|
||||
=========================================== */
|
||||
|
||||
/* 大屏幕 (≥1200px) - 4列网格 */
|
||||
@media (min-width: 1200px) {
|
||||
.guarantee-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.guarantee-item {
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 中等屏幕 (768px - 1199px) - 3列网格 */
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
.guarantee-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.guarantee-item {
|
||||
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.guarantee-content p {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕 (≤767px) - 单列网格 */
|
||||
@media (max-width: 767px) {
|
||||
.guarantee-section {
|
||||
margin-top: 60px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.guarantee-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.guarantee-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.guarantee-item {
|
||||
|
||||
padding: 20px 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.guarantee-content p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 移动端图标调整 */
|
||||
.guarantee-platform,
|
||||
.guarantee-security,
|
||||
.guarantee-practical,
|
||||
.guarantee-reliability,
|
||||
.guarantee-openness,
|
||||
.guarantee-standard,
|
||||
.guarantee-advanced {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* 超小屏幕 (≤480px) - 进一步优化 */
|
||||
@media (max-width: 480px) {
|
||||
.guarantee-container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.guarantee-item {
|
||||
padding: 15px 10px;
|
||||
|
||||
}
|
||||
|
||||
.guarantee-content p {
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 超小屏幕图标调整 */
|
||||
.guarantee-platform,
|
||||
.guarantee-security,
|
||||
.guarantee-practical,
|
||||
.guarantee-reliability,
|
||||
.guarantee-openness,
|
||||
.guarantee-standard,
|
||||
.guarantee-advanced {
|
||||
background-size: 100% 240px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user