Skip to content

P
project-www-h5
提交 3d8847fd authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

开发页面

上级 20135616
隐藏空白字符变更
内嵌 并排
正在显示 包含 919 行增加 和 4 行删除
components/Menu.vue
浏览文件 @ 3d8847fd
......@@ -64,10 +64,10 @@ export default {
{ name: '青少年儿童心理以及行为指导证书', onClick: this.showTips }
]
},
{ name: '专业共建', onClick: this.showTips },
{ name: '校企合作', onClick: this.showTips },
{ name: '产业学院', onClick: this.showTips },
{ name: '双高建设', onClick: this.showTips },
{ name: '专业共建', path: '/services/major' },
{ name: '产业学院', path: '/services/college' },
{ name: '新职业', path: '/services/job' },
{ name: '高质量实习就业服务', path: '/services/employment' },
{
name: '在线教育解决方案',
children: [
......
pages/services/college.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<tabs :list="navList" @tabChange="tabChange"></tabs>
<template v-if="showModule === 0">
<div class="module-1">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-1.png">
<div class="width-con">
<img style="margin:.26rem 0 .07rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-3.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-4.png">
<img style="width: 1.82rem;margin:.27rem 0 .15rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-text.png" alt="">
<div class="layout-con">
<div class="lay-con__left">
<div class="lay-l__top">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i1.png">
<img class="img-text" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i1-t1.png">
</div>
<div class="lay-l__bottom">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i2.png">
<img class="img-text" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i2-t2.png">
</div>
</div>
<div class="lay-con__right">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i3.png">
<img class="img-text" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-i3-t3.png">
</div>
</div>
<img style="margin:.15rem 0 .17rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-5.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-6.png">
<img style="margin:.3rem 0 .4rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-7.png">
</div>
</div>
</template>
<template v-if="showModule === 1">
<div class="module-2">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-1.png">
<div class="width-con">
<img style="margin: .31rem 0 .24rem;" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-3.png">
<div class="title">目标岗位群</div>
<college-item :data="m2Data"/>
</div>
</div>
</template>
<template v-if="showModule === 2">
<div class="module-3">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-1.png">
<div class="width-con">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-2.png">
<img style="margin-top:.1rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-3.png">
<div class="title">目标岗位群</div>
<college-item :data="m3Data1"/>
<college-item :data="m3Data2" style="margin:.1rem 0 .2rem"/>
</div>
</div>
</template>
</div>
</template>
<script>
import collegeItem from './components/collegeItem'
import tabs from './components/tab'
export default {
components: { tabs, collegeItem },
data() {
return {
navList: ['现代产业学院', '数字金融', '国际品牌管理与数字运营'],
showModule: 0,
m2Data: {
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l1.png',
text: '数字化营销'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l2.png',
text: '数字化运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l3.png',
text: '智能投顾'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l4.png',
text: '风险管理'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l5.png',
text: '金融数据分析'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l6.png',
text: '财务会计'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l7.png',
text: '金融建模'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img2-l8.png',
text: '投资分析'
},
]
},
m3Data1: {
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-i1n.png'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i2.png',
text: '文案策划'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i3.png',
text: '营销策划'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i4.png',
text: '渠道管理'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i5.png',
text: '广告策划'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i6.png',
text: '媒体公共'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i7.png',
text: '品牌管理运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i8.png',
text: '产品设计'
}
]
},
m3Data2: {
height: '.98rem',
list: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img1-i2n.png'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i8.png',
text: '互联网运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i9.png',
text: '网站运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i10.png',
text: '电商运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i11.png',
text: '新媒体运营'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/college-img3-i12.png',
text: '活动策划运营'
}
]
}
}
},
methods: {
tabChange(index) {
this.showModule = index
}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.width-con{
padding: 0 .17rem;
}
.module-1{
.layout-con{
display: flex;
.lay-con__left{
width: 1.25rem;
margin-right: .03rem;
.lay-l__top{
height: .73rem;
position: relative;
margin-bottom: .03rem;
.img-text{
width: .85rem;
position: absolute;
bottom: .08rem;
left: .07rem;
}
}
.lay-l__bottom{
height: .73rem;
position: relative;
.img-text{
width: .6rem;
position: absolute;
bottom: .04rem;
left: .07rem;
}
}
}
.lay-con__right{
position: relative;
width: 2.15rem;
height: 1.48rem;
.img-text{
width: 1rem;
position: absolute;
bottom: .08rem;
left: .11rem;
}
}
}
}
.module-2{
.title{
margin: .32rem 0 .06rem;
font-size: .14rem;
line-height: 100%;
color: #424242;
}
}
.module-3{
.title{
font-size: .14rem;
color: #424242;
line-height: 100%;
margin: .3rem 0 .1rem;
}
}
</style>
\ No newline at end of file
pages/services/components/collegeItem.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<ul>
<li v-for="(item, index) in data.list" :key="index" :style="getStyle(data.height)">
<img :src="item.img" alt="">
<div class="pop" v-if="item.text">
<div class="text">{{ item.text }}</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: { type: Object }
},
methods: {
getStyle(s) {
return s ? `height:${s}` : 'height:1.31rem'
}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
height: 100%;
display: block;
}
ul{
display: flex;
flex-wrap: wrap;
li{
width: 1.68rem;
height: 1.31rem;
position: relative;
margin-bottom: .04rem;
margin-right: .04rem;
&:nth-child(even){
margin-right: 0;
}
.pop{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.29);
.text{
position: absolute;
bottom: .15rem;
left: .1rem;
font-size: .14rem;
line-height: 100%;
color: #FFFFFF;
}
}
}
}
</style>
pages/services/components/majorTab.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<ul class="tab-btn__box">
<li @click="tabChange(index)" :class="index === tabIndex && 'active'" v-for="(item, index) in data.tab" :key="index">
<div class="num">0{{ index + 1 }}</div>
<div class="text">{{ item }}</div>
</li>
</ul>
<ul class="tab-content__box">
<li :class="index === tabIndex && 'active'" v-for="(item, index) in data.content" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: { type: Object }
},
data() {
return {
tabIndex: 0
}
},
methods: {
tabChange(index) {
this.tabIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.tab-btn__box{
display: flex;
justify-content: space-between;
li{
width: 1.1rem;
height: .75rem;
background: #FBFBFB;
position: relative;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
&.active{
background: #fff;
&::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: .04rem;
background: #AA1941;
}
}
.num{
font-size: .18rem;
font-weight: normal;
line-height: 100%;
color: #AA1941;
text-align: center;
padding-top: .17rem;
}
.text{
font-size: .1rem;
line-height: 100%;
color: #424242;
margin-top: .1rem;
text-align: center;
}
}
}
.tab-content__box{
width: 100%;
li{
font-size: .12rem;
line-height: .24rem;
color: #333333;
padding: .32rem .21rem;
background: #fff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
margin-top: .15rem;
display: none;
&.active{
display: block;
}
}
}
</style>
pages/services/components/tab.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<nav>
<ul class="app-tab-nav">
<li
v-for="(item, index) in list"
:key="index"
:class="{ 'is-active': index === activeIndex }"
@click="tabChange(index)"
>
<div>{{ item }}</div>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: { list: { type: Array, default: () => [] }, active: { type: String } },
data() {
return {
activeIndex: 0
}
},
mounted() {
console.log(this.list)
},
methods: {
tabChange(index) {
this.activeIndex = index
this.$emit('tabChange', index)
}
}
}
</script>
<style lang="scss">
.app-tab-nav {
display: flex;
overflow: scroll;
&::-webkit-scrollbar{
display: none;
}
li {
margin-left: 0.3rem;
font-size: 0.14rem;
line-height: 0.38rem;
color: #333;
&.is-active {
border-bottom: 0.02rem solid #aa1941;
}
div{
white-space: nowrap;
cursor: pointer;
}
}
}
</style>
pages/services/employment.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<img style="margin-top: .14rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-1.png">
<div class="width-con">
<img style="margin:.3rem 0 .2rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-3.png">
<img style="margin:0.3rem 0" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/emp-img-4.png">
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.width-con{
padding: 0 .17rem;
}
</style>
pages/services/job.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<img style="margin-top: .14rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/job-img1-1.png">
<div class="width-con">
<img style="margin:.25rem 0 .08rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/job-img1-2.png">
<img style="margin:0 0 .2rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/job-img1-3.png">
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.width-con{
padding: 0 .17rem;
}
</style>
pages/services/major.vue 0 → 100644
浏览文件 @ 3d8847fd
<template>
<div>
<tabs :list="navList" @tabChange="tabChange"></tabs>
<template v-if="showModule === 0">
<div class="module-1">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img1.png" alt="">
<img class="img2" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2.png" alt="">
</div>
</template>
<template v-if="showModule === 1">
<div class="module-2">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2-1.png" alt="">
<div class="img-content">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2-2.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2-3.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2-4.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2-5.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img2-6.png" alt="">
</div>
</div>
</template>
<template v-if="showModule === 2">
<div class="module-3">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img3-1.png" alt="">
<div class="img-content">
<img class="img" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img3-2.png" alt="">
<ul class="item-list">
<li>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img3-i1.png" alt="">
<div class="content">
<div class="title">线上课程研发</div>
<div class="p">课程内容设置</div>
<div class="p">课程师资匹配</div>
<div class="p">课程制作方案</div>
</div>
</li>
<li>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img3-i2.png" alt="">
<div class="content">
<div class="title">课程制作</div>
<div class="p-con">
<span>课程录制</span>
<span>课程剪辑</span>
</div>
<div class="p-con">
<span>课程编辑</span>
<span>课程成片</span>
</div>
<div class="dec">（课程录制，满足各种需求，不同形式拥有专属的场地）</div>
</div>
</li>
<li>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img3-i3.png" alt="">
<div class="content">
<div class="title">线下课程开发</div>
<div class="p-con">
<span>教学设计</span>
<span>教务计划</span>
</div>
<div class="p-con">
<span>实施执行方案</span>
</div>
<div class="dec">（全国三大教学基地，10多间不同需求的教室与会议室）</div>
</div>
</li>
</ul>
<img style="margin-top:.2rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img3-3.png" alt="">
</div>
</div>
</template>
<template v-if="showModule === 3">
<div class="module-4">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-1.png" alt="">
<div class="img-con">
<img class="img2" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-2.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-3.png" alt="">
</div>
<ul class="list">
<li
:class="index === m4Index && 'active'"
v-for="(item, index) in module4List"
:key="index"
@click="m4ListChange(index)"
>
<div class="num">0{{ index + 1 }}</div>
<div class="text">{{ item }}</div>
</li>
</ul>
<div class="img-con">
<img style="margin:.27rem 0 .12rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-4.png" alt="">
</div>
<swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">
<template v-for="(item, index) in m4Swiper">
<swiper-slide :key="index">
<img :src="item" class="banner-img" />
</swiper-slide>
</template>
</swiper>
</div>
</template>
<template v-if="showModule === 4">
<div class="module-5">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img5-1.png" alt="">
<div class="title">整体模式</div>
<div class="whit-con">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img5-2.png" alt="">
</div>
<img class="img3" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img5-3.png" alt="">
</div>
</template>
<template v-if="showModule === 5">
<div class="module-6">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-1.png" alt="">
<div class="img-con">
<img style="margin: .08rem 0 .2rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-2.png" alt="">
<major-tab :data="m5Data"/>
</div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-3.png" alt="">
<div class="img-con">
<img style="margin-top: .3rem" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-4.png" alt="">
</div>
<div class="title">实施流程</div>
<div class="icon__all">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-a1.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-a2.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-a3.png" alt="">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img6-a4.png" alt="">
</div>
</div>
</template>
<template v-if="showModule === 6">
<div class="module-7">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img7-1.png" alt="">
<div class="project-con">
<div class="title">项目目标</div>
<ul>
<li v-for="(item, index) in m7Data" :key="index">
<div class="num">0{{ index + 1 }}</div>
<div class="p" v-for="(cItem, cIndex) in item" :key="'c' + cIndex">{{ cItem }}</div>
</li>
</ul>
</div>
<img class="img2" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img7-2.png" alt="">
<img class="img3" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img7-3.png" alt="">
</div>
</template>
</div>
</template>
<script>
import majorTab from './components/majorTab'
import tabs from './components/tab'
export default {
components: { tabs, majorTab },
data() {
return {
swiperOptions: {
autoplay: true,
delay: 5000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10
},
m4Index: 0,
module4List: ['课程教学需要的教学实训实习基地', '专业教学需要的生产实训实习基地', '引产入校实训实习基地', '其他短期、分散的实训实习单位（点）'],
showModule: 0,
navList: ['专业顶层设计', '师资培训', '课程资源建设', '实训基地建设', '实训平台建设', '引产入校', '专业+创新创业'],
m4Swiper: [
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-i1.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-i2.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-i3.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-i4.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/major-img4-i5.png',
],
m5Data: {
tab: ['就业导向的理论学习', '项目驱动职业技能提升', '硬核就业竞争力'],
content: ['通过集中式强化培训和练习，让学生掌握扎实的专业理论基础。', '让学生通过真实的企业项目实战，锻炼实践技能，提升技术应用转化能力。', '通过在真实企业环境工作，融入企业文化，培养学生的综合职业素养。']
},
m7Data: [
['学习创业基础', '激发创业意识和兴趣', '创新创业精神'],
['模拟创新创业实训和实践', '掌握基本创业技能', '培养创新创业思维'],
['实施执行方案', '项目孵化', '路演辅导', '模拟点评'],
['毕业实习', '引产入校', '创业运营', '产业资源对接']
]
}
},
methods: {
tabChange(index) {
this.showModule = index
},
m4ListChange(index) {
this.m4Index = index
}
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%;
display: block;
}
.module-1{
.img2{
width: 3.43rem;
display: block;
margin: 0 auto;
}
}
.module-2{
.img-content{
width: 3.43rem;
display: block;
margin: 0 auto;
img{
margin-bottom: .1rem;
}
}
}
.module-3{
.img-content{
padding: .2rem .16rem;
}
.item-list{
overflow: scroll;
display: flex;
&::-webkit-scrollbar{
display:none
}
li{
width: 1.97rem;
margin-right: .1rem;
img{
width: 1.97rem;
height: 2.03rem;
}
.content{
width: 1.97rem;
height: 1.35rem;
background: #fff;
.title{
padding-top: .15rem;
text-align: center;
font-size: .14rem;
line-height: 100%;
color: #333333;
margin-bottom: .12rem;
}
.p{
font-size: .13rem;
line-height: 100%;
color: #666666;
margin-bottom: .1rem;
text-align: center;
}
.p-con{
display: flex;
width: 1.26rem;
margin: 0 auto;
padding-bottom: .1rem;
justify-content: space-between;
span{
font-size: .13rem;
line-height: 100%;
color: #666666;
}
}
.dec{
font-size: .12rem;
line-height: 100%;
color: #666666;
width: 1.7rem;
margin: 0 auto;
}
}
}
}
}
.module-4{
.my-swiper {
margin-bottom: .2rem;
::v-deep .swiper-wrapper {
align-items: center;
}
.swiper-slide {
position: relative;
width: 2.1rem;
height: 1.22rem;
}
.swiper-slide-active {
width: 2.1rem;
height: 1.34rem;
}
}
.img-con{
padding: 0 .17rem;
}
.img2{
width: 2.3rem;
margin: .3rem 0;
}
.list{
width: 3.08rem;
margin-left: .28rem;
li{
height: .55rem;
background: #FBFBFB;
display: flex;
align-items: center;
box-sizing: border-box;
margin-bottom: .1rem;
&.active{
background: #FFFFFF;
box-shadow: 0px .05rem .12rem rgba(0, 0, 0, 0.06);
}
.num{
width: .35rem;
height: .35rem;
background: #AA1941;
text-align: center;
line-height: .35rem;
font-size: .17rem;
color: #FFFFFF;
margin-left: .1rem;
margin-right: .13rem;
}
.text{
font-size: .12rem;
color: #424242;
}
}
}
}
.module-5{
.title{
font-size: .14rem;
line-height: 100%;
color: #424242;
margin: .3rem 0 .12rem .16rem;
}
.whit-con{
padding: .14rem;
background: #fff;
}
.img3{
width: 2.56rem;
margin: .3rem 0 .25rem .17rem;
}
}
.module-6{
.img-con{
padding: .17rem;
}
.title{
padding: 0 .17rem;
margin: .3rem 0 .2rem;
font-size: .14rem;
line-height: 100%;
color: #424242;
}
.icon__all{
display: flex;
justify-content: center;
padding-bottom: .2rem;
img{
width: .85rem;
}
}
}
.module-7{
.project-con{
padding: 0 .17rem;
.title{
margin: .08rem 0 .16rem;
font-size: .14rem;
line-height: 100%;
color: #424242;
}
ul{
display: flex;
flex-wrap: wrap;
li{
width: 1.65rem;
height: 1.37rem;
box-sizing: border-box;
padding: .17rem;
background: #FBFBFB;
margin: 0 .1rem .1rem 0;
&:nth-child(even){
margin-right: 0;
}
.num{
font-size: .2rem;
line-height: 100%;
color: #AA1941;
margin-bottom: .12rem;
}
.p{
line-height: 100%;
font-size: .11rem;
line-height: 100%;
color: #424242;
margin-bottom: .08rem;
}
}
}
}
.img2{
width: 2.82rem;
margin: .13rem auto .25rem auto;
}
.img3{
width: 3.42rem;
margin: 0 auto .3rem auto;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论