feat: 提交
This commit is contained in:
parent
10f20c991b
commit
a709a31e86
2236
pnpm-lock.yaml
Normal file
2236
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,19 +21,16 @@
|
||||
<div class="section-two-content-title-item">您的实验室搭建</div>
|
||||
<div class="section-two-content-title-item">样本中央数据库</div>
|
||||
</div>
|
||||
<van-image
|
||||
class="section-two-content-image"
|
||||
lazy-load
|
||||
:src="groupImage"
|
||||
/>
|
||||
<div class="section-two-content-text mt-[160px]">系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。</div>
|
||||
<van-image class="section-two-content-image" lazy-load :src="groupImage" />
|
||||
<div class="section-two-content-text mt-[160px]">系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
|
||||
</div>
|
||||
<div class="section-two-content-text">样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的递。</div>
|
||||
<div class="section-two-content-text">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section-three">
|
||||
<div class="section-three-title">精于库位管理，不止于库位管理</div>
|
||||
<van-image class="section-three-image" lazy-load :src="groupImageInventory"/>
|
||||
<van-image class="section-three-image" lazy-load :src="groupImageInventory" />
|
||||
<div class="section-three-text">系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。</div>
|
||||
<div class="section-three-text">另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。</div>
|
||||
<div class="section-three-text mb-[24px]">如果您还在为库内情况不明而烦恼，线粒®生物样本管理平台不失为您的效率之选。</div>
|
||||
@ -103,7 +100,9 @@
|
||||
</section>
|
||||
<section class="section-six">
|
||||
<div class="section-six-title">面向生物药场景而设计，适合各细分领域</div>
|
||||
<div class="section-six-text">药企样本管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。线粒®生物样本管理平台专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。</div>
|
||||
<div class="section-six-text">
|
||||
药企样本管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。线粒®生物样本管理平台专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
|
||||
</div>
|
||||
<div class="section-six-items">
|
||||
<div v-for="item in sixItems" :key="item.title">
|
||||
<van-image class="section-six-item-image" lazy-load :src="item.img" />
|
||||
@ -122,14 +121,11 @@
|
||||
<van-tab title="可对接硬件"></van-tab>
|
||||
<van-tab title="可对接软件"></van-tab>
|
||||
</van-tabs>
|
||||
<van-swipe ref="swipeCardRef" @change="onSwipeCardChange" class="my-swipe" lazy-render indicator-color="white">
|
||||
<van-swipe ref="swipeCardRef" @change="onSwipeCardChange" class="my-swipe" lazy-render
|
||||
indicator-color="white">
|
||||
<van-swipe-item class="section-eight-swipe-item" v-for="(tab, index) in cardTabs" :key="tab.title">
|
||||
<van-image
|
||||
v-for="item in tab.items"
|
||||
class="section-eight-swipe-item-image"
|
||||
lazy-load
|
||||
:class="[index === 0 ? 'tab-one' : 'tab-two']"
|
||||
:src="item" />
|
||||
<van-image v-for="item in tab.items" class="section-eight-swipe-item-image" lazy-load
|
||||
:class="[ index === 0 ? 'tab-one' : 'tab-two' ]" :src="item" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</section>
|
||||
@ -189,7 +185,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-price-desc">适合样品量较多、有明确的业务规范的用户，我们提供定制开发服务，让 系统更适合用户的个性化管理场景</div>
|
||||
<div class="btn-box-price">立即咨询</div>
|
||||
<div class="btn-box-price" @click="openChat">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-wrap">
|
||||
@ -210,7 +206,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-price-desc">专为中小型企业设计，提供核心的样品管理功能，旨在简化操作流程，提 升管理效率，同时保持成本效益， 适合预算有限的企业。</div>
|
||||
<div class="btn-box-price-two">立即咨询</div>
|
||||
<div class="btn-box-price" @click="openChat">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-wrap">
|
||||
@ -231,7 +227,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-price-desc">标准版是样品管理系统的基础版本，它提供了样品管理的基本功能，旨在满足各高校实验室、科研院所等企业对样品管理的基本需求。</div>
|
||||
<div class="btn-box-price">立即咨询</div>
|
||||
<div class="btn-box-price" @click="openChat">立即咨询</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -241,96 +237,96 @@
|
||||
</section>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Footer from '../components/Footer.vue'
|
||||
import Header from '../components/Header.vue'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import groupImage from '../assets/Group 20.png'
|
||||
import groupImageInventory from '../assets/Group 21.png'
|
||||
import img11 from '../assets/1-1.webp'
|
||||
import img12 from '../assets/1-2.webp'
|
||||
import img13 from '../assets/1-3.webp'
|
||||
import img14 from '../assets/1-4.webp'
|
||||
import img21 from '../assets/2-1.webp'
|
||||
import img22 from '../assets/2-2.webp'
|
||||
import img23 from '../assets/2-3.webp'
|
||||
import img31 from '../assets/3-1.webp'
|
||||
import img32 from '../assets/3-2.webp'
|
||||
import img33 from '../assets/3-3.webp'
|
||||
import img41 from '../assets/4-1.webp'
|
||||
import img42 from '../assets/4-2.webp'
|
||||
import img43 from '../assets/4-3.webp'
|
||||
import img44 from '../assets/4-4.webp'
|
||||
import img51 from '../assets/5-1.webp'
|
||||
import img52 from '../assets/5-2.webp'
|
||||
import img53 from '../assets/5-3.webp'
|
||||
import img54 from '../assets/5-4.webp'
|
||||
import img71 from '../assets/7-1.webp'
|
||||
import img72 from '../assets/7-2.webp'
|
||||
import img73 from '../assets/7-3.webp'
|
||||
import img74 from '../assets/7-4.webp'
|
||||
import yp01 from '../assets/yp01.png'
|
||||
import yp02 from '../assets/yp02.png'
|
||||
import yp03 from '../assets/yp03.png'
|
||||
import yp04 from '../assets/yp04.png'
|
||||
import yp05 from '../assets/yp05.png'
|
||||
import i00 from '../assets/i00.png'
|
||||
import i01 from '../assets/i01.png'
|
||||
import i02 from '../assets/i02.png'
|
||||
import i03 from '../assets/i03.png'
|
||||
import i04 from '../assets/i04.png'
|
||||
import i05 from '../assets/i05.png'
|
||||
import i06 from '../assets/i06.png'
|
||||
import group33 from '../assets/Group 72.png'
|
||||
import company1 from '../assets/company/image-1.png'
|
||||
import company2 from '../assets/company/image-2.png'
|
||||
import company3 from '../assets/company/image-3.png'
|
||||
import company4 from '../assets/company/image-4.png'
|
||||
import company5 from '../assets/company/image-5.png'
|
||||
import company6 from '../assets/company/image-6.png'
|
||||
import company7 from '../assets/company/image-7.png'
|
||||
import company8 from '../assets/company/image-8.png'
|
||||
import company9 from '../assets/company/image-9.png'
|
||||
import company10 from '../assets/company/image-10.png'
|
||||
import company11 from '../assets/company/image-11.png'
|
||||
import company12 from '../assets/company/image-12.png'
|
||||
import company13 from '../assets/company/image-13.png'
|
||||
import company14 from '../assets/company/image-14.png'
|
||||
import company15 from '../assets/company/image-15.png'
|
||||
import company16 from '../assets/company/image-16.png'
|
||||
import company17 from '../assets/company/image-17.png'
|
||||
import company18 from '../assets/company/image-18.png'
|
||||
import company19 from '../assets/company/image-19.png'
|
||||
import company20 from '../assets/company/image-20.png'
|
||||
<script setup>
|
||||
import Footer from '../components/Footer.vue'
|
||||
import Header from '../components/Header.vue'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import groupImage from '../assets/Group 20.png'
|
||||
import groupImageInventory from '../assets/Group 21.png'
|
||||
import img11 from '../assets/1-1.webp'
|
||||
import img12 from '../assets/1-2.webp'
|
||||
import img13 from '../assets/1-3.webp'
|
||||
import img14 from '../assets/1-4.webp'
|
||||
import img21 from '../assets/2-1.webp'
|
||||
import img22 from '../assets/2-2.webp'
|
||||
import img23 from '../assets/2-3.webp'
|
||||
import img31 from '../assets/3-1.webp'
|
||||
import img32 from '../assets/3-2.webp'
|
||||
import img33 from '../assets/3-3.webp'
|
||||
import img41 from '../assets/4-1.webp'
|
||||
import img42 from '../assets/4-2.webp'
|
||||
import img43 from '../assets/4-3.webp'
|
||||
import img44 from '../assets/4-4.webp'
|
||||
import img51 from '../assets/5-1.webp'
|
||||
import img52 from '../assets/5-2.webp'
|
||||
import img53 from '../assets/5-3.webp'
|
||||
import img54 from '../assets/5-4.webp'
|
||||
import img71 from '../assets/7-1.webp'
|
||||
import img72 from '../assets/7-2.webp'
|
||||
import img73 from '../assets/7-3.webp'
|
||||
import img74 from '../assets/7-4.webp'
|
||||
import yp01 from '../assets/yp01.png'
|
||||
import yp02 from '../assets/yp02.png'
|
||||
import yp03 from '../assets/yp03.png'
|
||||
import yp04 from '../assets/yp04.png'
|
||||
import yp05 from '../assets/yp05.png'
|
||||
import i00 from '../assets/i00.png'
|
||||
import i01 from '../assets/i01.png'
|
||||
import i02 from '../assets/i02.png'
|
||||
import i03 from '../assets/i03.png'
|
||||
import i04 from '../assets/i04.png'
|
||||
import i05 from '../assets/i05.png'
|
||||
import i06 from '../assets/i06.png'
|
||||
import group33 from '../assets/Group 72.png'
|
||||
import company1 from '../assets/company/image-1.png'
|
||||
import company2 from '../assets/company/image-2.png'
|
||||
import company3 from '../assets/company/image-3.png'
|
||||
import company4 from '../assets/company/image-4.png'
|
||||
import company5 from '../assets/company/image-5.png'
|
||||
import company6 from '../assets/company/image-6.png'
|
||||
import company7 from '../assets/company/image-7.png'
|
||||
import company8 from '../assets/company/image-8.png'
|
||||
import company9 from '../assets/company/image-9.png'
|
||||
import company10 from '../assets/company/image-10.png'
|
||||
import company11 from '../assets/company/image-11.png'
|
||||
import company12 from '../assets/company/image-12.png'
|
||||
import company13 from '../assets/company/image-13.png'
|
||||
import company14 from '../assets/company/image-14.png'
|
||||
import company15 from '../assets/company/image-15.png'
|
||||
import company16 from '../assets/company/image-16.png'
|
||||
import company17 from '../assets/company/image-17.png'
|
||||
import company18 from '../assets/company/image-18.png'
|
||||
import company19 from '../assets/company/image-19.png'
|
||||
import company20 from '../assets/company/image-20.png'
|
||||
|
||||
import Image101 from "../assets/image 101.png";
|
||||
import Image48 from "../assets/image 48.png";
|
||||
import Frame50 from "../assets/Frame 50.png";
|
||||
import Image122 from "../assets/image 122.png";
|
||||
import Image123 from "../assets/image 123.png";
|
||||
import Image124 from "../assets/image 124.png";
|
||||
import Image125 from "../assets/image 125.png";
|
||||
import Software1 from "../assets/software01.png";
|
||||
import Software2 from "../assets/software02.png";
|
||||
import Software3 from "../assets/software03.png";
|
||||
import Software4 from "../assets/software04.png";
|
||||
import Software5 from "../assets/software05.png";
|
||||
import Software6 from "../assets/software06.png";
|
||||
import feature1 from "../assets/image 61.png"
|
||||
import feature2 from "../assets/image 65.png"
|
||||
import feature3 from "../assets/image 66.png"
|
||||
import feature4 from "../assets/image 67.png"
|
||||
import feature5 from "../assets/image 68.png"
|
||||
import feature6 from "../assets/image 64.png"
|
||||
import checkIcon from "../assets/Group 82 1.png"
|
||||
import Image101 from "../assets/image 101.png";
|
||||
import Image48 from "../assets/image 48.png";
|
||||
import Frame50 from "../assets/Frame 50.png";
|
||||
import Image122 from "../assets/image 122.png";
|
||||
import Image123 from "../assets/image 123.png";
|
||||
import Image124 from "../assets/image 124.png";
|
||||
import Image125 from "../assets/image 125.png";
|
||||
import Software1 from "../assets/software01.png";
|
||||
import Software2 from "../assets/software02.png";
|
||||
import Software3 from "../assets/software03.png";
|
||||
import Software4 from "../assets/software04.png";
|
||||
import Software5 from "../assets/software05.png";
|
||||
import Software6 from "../assets/software06.png";
|
||||
import feature1 from "../assets/image 61.png"
|
||||
import feature2 from "../assets/image 65.png"
|
||||
import feature3 from "../assets/image 66.png"
|
||||
import feature4 from "../assets/image 67.png"
|
||||
import feature5 from "../assets/image 68.png"
|
||||
import feature6 from "../assets/image 64.png"
|
||||
import checkIcon from "../assets/Group 82 1.png"
|
||||
|
||||
const active = ref(0);
|
||||
const cardActive = ref(0);
|
||||
const swipeRef = ref();
|
||||
const swipeCardRef = ref();
|
||||
const tabs = ref([
|
||||
const active = ref(0);
|
||||
const cardActive = ref(0);
|
||||
const swipeRef = ref();
|
||||
const swipeCardRef = ref();
|
||||
const tabs = ref([
|
||||
{
|
||||
title: '样品登记',
|
||||
desc: '在药企样本管理过程中，样本的登记入库是发生频率非常高的场景。针对样品登记，我们的产品设计始终遵循贴合场景、简化操作、减少重复的原则。',
|
||||
@ -455,9 +451,9 @@
|
||||
},
|
||||
]
|
||||
},
|
||||
])
|
||||
])
|
||||
|
||||
const cardTabs = ref([
|
||||
const cardTabs = ref([
|
||||
{
|
||||
title: '可对接硬件',
|
||||
items: [Image101, Image48, Frame50, Image122, Image123, Image124, Image125]
|
||||
@ -466,8 +462,8 @@
|
||||
title: '可对接软件',
|
||||
items: [Software1, Software2, Software3, Software4, Software5, Software6]
|
||||
},
|
||||
])
|
||||
const sixItems = ref([
|
||||
])
|
||||
const sixItems = ref([
|
||||
{
|
||||
img: i00,
|
||||
text: '抗体药物',
|
||||
@ -496,8 +492,8 @@
|
||||
img: i06,
|
||||
text: '其他生物实验室',
|
||||
},
|
||||
])
|
||||
const features = ref([
|
||||
])
|
||||
const features = ref([
|
||||
{
|
||||
img: feature1,
|
||||
title: '出入库',
|
||||
@ -543,23 +539,26 @@
|
||||
title: '自由扩展',
|
||||
desc: '支持接入智能化监控设备，如温感、烟感、温湿器等设备，提供REST API接口衔接各种LIMS系统',
|
||||
},
|
||||
])
|
||||
const onTabChange = () => {
|
||||
])
|
||||
const onTabChange = () => {
|
||||
swipeRef.value.swipeTo(active.value);
|
||||
}
|
||||
const onCardChange = (index) => {
|
||||
}
|
||||
const onCardChange = (index) => {
|
||||
swipeCardRef.value.swipeTo(index);
|
||||
}
|
||||
const onSwipeChange = (index) => {
|
||||
}
|
||||
const onSwipeChange = (index) => {
|
||||
active.value = index;
|
||||
}
|
||||
const onSwipeCardChange = (index) => {
|
||||
}
|
||||
const onSwipeCardChange = (index) => {
|
||||
cardActive.value = index;
|
||||
}
|
||||
</script>
|
||||
}
|
||||
const openChat = () => {
|
||||
ssq.push('chatOpen');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.section-one {
|
||||
<style lang="less" scoped>
|
||||
.section-one {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-image: url("../assets/bgc002.png");
|
||||
@ -567,6 +566,7 @@
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
.section-one-content {
|
||||
// position: absolute;
|
||||
// top: 27px;
|
||||
@ -574,16 +574,19 @@
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
text-align: left;
|
||||
|
||||
.section-one-content-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 229, 255, 1);
|
||||
}
|
||||
|
||||
.section-one-content-subtitle {
|
||||
font-size: 18px;
|
||||
margin-top: 17px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.section-one-content-button {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
@ -598,14 +601,17 @@
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-two {
|
||||
}
|
||||
|
||||
.section-two {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.section-two-content {
|
||||
|
||||
width: 100%;
|
||||
|
||||
.section-two-content-title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@ -615,6 +621,7 @@
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.section-two-content-image {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
@ -622,6 +629,7 @@
|
||||
width: 238px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.section-two-content-text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
@ -630,13 +638,15 @@
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-three {
|
||||
}
|
||||
|
||||
.section-three {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.section-three-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -647,11 +657,13 @@
|
||||
vertical-align: middle;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-three-image {
|
||||
width: 238px;
|
||||
height: 140px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-three-text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
@ -660,8 +672,9 @@
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.section-four {
|
||||
}
|
||||
|
||||
.section-four {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
padding-top: 22px;
|
||||
@ -676,15 +689,19 @@
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section-four-tabs {
|
||||
margin-top: 20px;
|
||||
|
||||
/deep/ .van-tabs__nav.van-tabs__nav--line {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.section-four-swipe-item {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.section-four-tab-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -695,18 +712,21 @@
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-four-desc {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-four-images {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.section-four-images-item {
|
||||
width: 154px;
|
||||
margin-right: 10px;
|
||||
@ -714,9 +734,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.section-four-images-item-image {
|
||||
width: 154px;
|
||||
height: 154px;
|
||||
@ -724,11 +746,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.image {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-four-images-item-text {
|
||||
margin-top: 12px;
|
||||
font-family: PingFang SC;
|
||||
@ -740,11 +764,13 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-five {
|
||||
}
|
||||
|
||||
.section-five {
|
||||
width: 100%;
|
||||
padding: 32px 20px;
|
||||
background: url("../assets/image 81.png") no-repeat top right / 38% 57%, linear-gradient(161.52deg, #003EA0 -5.69%, #0AA9F8 55.36%);
|
||||
|
||||
.section-five-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -761,11 +787,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.section-five-item-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.section-five-item-title {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
@ -776,6 +804,7 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-five-text {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
@ -784,10 +813,12 @@
|
||||
color: #FFFFFF;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.section-six {
|
||||
}
|
||||
|
||||
.section-six {
|
||||
width: 100%;
|
||||
padding: 32px 20px;
|
||||
|
||||
.section-six-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -797,6 +828,7 @@
|
||||
vertical-align: middle;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.section-six-text {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
@ -807,16 +839,20 @@
|
||||
color: #333333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.section-six-items {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
justify-content: center; /* 整体居中 */
|
||||
justify-content: center;
|
||||
/* 整体居中 */
|
||||
grid-template-columns: repeat(3, 0fr);
|
||||
gap: 20px;
|
||||
|
||||
.section-six-item-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.section-six-item-text {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
@ -828,11 +864,13 @@
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-seven {
|
||||
}
|
||||
|
||||
.section-seven {
|
||||
width: 100%;
|
||||
padding: 32px 20px;
|
||||
background: url("../assets/image 99.png") no-repeat center center / 100% 100%;
|
||||
|
||||
.section-seven-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -842,6 +880,7 @@
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-seven-text {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
@ -852,14 +891,17 @@
|
||||
color: #333333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-seven-image {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
.section-eight {
|
||||
}
|
||||
|
||||
.section-eight {
|
||||
width: 100%;
|
||||
padding: 32px 20px;
|
||||
|
||||
.section-eight-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -871,24 +913,30 @@
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-eight-tabs {
|
||||
/deep/ .van-tabs__nav.van-tabs__nav--line {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.section-eight-swipe-item {
|
||||
display: grid;
|
||||
padding: 8px 0;
|
||||
justify-content: center; /* 整体居中 */
|
||||
justify-content: center;
|
||||
/* 整体居中 */
|
||||
grid-template-columns: repeat(3, 0fr);
|
||||
gap: 20px;
|
||||
|
||||
.section-eight-swipe-item-image {
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
|
||||
&.tab-one {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
&.tab-two {
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
@ -897,15 +945,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-eight-swipe-item-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.section-nine {
|
||||
}
|
||||
|
||||
.section-nine {
|
||||
width: 100%;
|
||||
padding: 32px 20px;
|
||||
background: url("../assets/Mask group.png") no-repeat top center / contain, #1E9DEC1A;
|
||||
|
||||
.section-nine-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -916,6 +967,7 @@
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-nine-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -923,16 +975,19 @@
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
row-gap: 12px;
|
||||
|
||||
.section-nine-item {
|
||||
width: 103px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.section-ten {
|
||||
}
|
||||
|
||||
.section-ten {
|
||||
width: 100%;
|
||||
padding: 30px 0;
|
||||
|
||||
.section-ten-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -942,12 +997,14 @@
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.section-ten-items {
|
||||
display:grid;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 0fr);
|
||||
gap: 8px 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-ten-item {
|
||||
width: 174px;
|
||||
height: 190px;
|
||||
@ -956,13 +1013,17 @@
|
||||
border-radius: 4px;
|
||||
padding: 30px 10px 10px 10px;
|
||||
margin-top: 48px;
|
||||
|
||||
&:nth-child(2) .section-ten-item-image {
|
||||
width: 80px;
|
||||
height: 54px;
|
||||
}
|
||||
&:nth-child(5), &:nth-child(6) {
|
||||
|
||||
&:nth-child(5),
|
||||
&:nth-child(6) {
|
||||
height: 205px;
|
||||
}
|
||||
|
||||
.section-ten-item-image {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
@ -973,6 +1034,7 @@
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.section-ten-item-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -981,6 +1043,7 @@
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-ten-item-text {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
@ -993,8 +1056,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.section-eleven {
|
||||
}
|
||||
|
||||
.section-eleven {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
@ -1002,6 +1066,7 @@
|
||||
align-items: center;
|
||||
padding: 32px 20px;
|
||||
background: linear-gradient(180deg, rgba(177, 228, 255, 0.5) 0%, rgba(177, 228, 255, 0) 100%);
|
||||
|
||||
.section-eleven-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -1012,6 +1077,7 @@
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.price-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -1043,6 +1109,7 @@
|
||||
font-size: 16px;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.text-price-desc {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
@ -1053,6 +1120,7 @@
|
||||
color: #666666;
|
||||
margin: 20px 20px 50px 20px;
|
||||
}
|
||||
|
||||
.btn-box-price {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
@ -1072,6 +1140,7 @@
|
||||
color: #0D90FF;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.btn-box-price-two {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
@ -1090,13 +1159,15 @@
|
||||
letter-spacing: 0%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.base-wrap {
|
||||
position: relative;
|
||||
width: 270px;
|
||||
height: 388px;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
+ .base-wrap {
|
||||
|
||||
+.base-wrap {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
@ -1150,11 +1221,13 @@
|
||||
.base-three {
|
||||
background: linear-gradient(180deg, #c9e7ff 0%, #ffffff 100%);
|
||||
}
|
||||
}
|
||||
.section-twelve {
|
||||
}
|
||||
|
||||
.section-twelve {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.section-twelve-title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
@ -1165,18 +1238,20 @@
|
||||
color: #000000;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-twelve-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.section-thirteen {
|
||||
}
|
||||
|
||||
.section-thirteen {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background: linear-gradient(91.27deg, #0D90FF -23.63%, #0D387E 97.65%);
|
||||
|
||||
.section-thirteen-title {
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user