TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

抖火法律首页调整

Browse Source
This commit is contained in:
唐明明
2023-06-14 14:25:30 +08:00
parent ca8c6dff01
commit 42e847fccd
26 changed files with 236 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
pages/index/index.vue
View File

@@ -37,11 +37,10 @@
<view class="free" @click="onView('FreeService')">
<image class="free-img" src="@/static/index/index_banner_free.png" mode="widthFix" />
</view>
<!-- 金法产品 -->
<!-- 协商调解类 -->
<view class="block">
<view class="block-title">
<view class="title"> 金法产品</view>
<!-- <view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"/></view> -->
<view class="title">协商调解类</view>
</view>
<scroll-view class="the-tabs" scroll-x="true" >
<block v-for="(item, index) in theTabs" :key="index">
@@ -61,56 +60,79 @@
:id='"_tabs"+item.service_id'
@click="sevicesClick(item.service_id)"
>
<image class="cover" :src="item.cover" mode="aspectFill" />
<view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
<view class="title nowrap">{{item.title}}</view>
<view class="price nowrap"><text>￥</text>{{item.price}}<text class="ding" v-if="item.type">定金</text></view>
</view>
</scroll-view>
</view>
<!-- 综法产品 -->
<!-- 法律咨询类 -->
<view class="block">
<view class="block-title">
<view class="title">综法产品</view>
<view class="title">法律咨询类</view>
</view>
<view class="zong-list">
<view class="zong-list-item" @click="onView('Individual')">
<image class="cover" src="@/static/synthesize/img_00.png" mode="aspectFill" />
<view class="colum-flex">
<view>
<view class="title nowrap">个人全年法律</view>
<view class="subtitle">咨询服务 抖火法律</view>
</view>
<view class="price nowrap"><text>￥</text>365.00/年</view>
<scroll-view
class="the-flex"
style="padding-top: 0;"
scroll-x="true"
scroll-with-animation="true"
:scroll-into-view='defaultViewId'
>
<view class="the-flex-item"
@click="onView('Individual')"
>
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_00.png') + ');'"></view>
<view class="title nowrap">个人全年法律</view>
<view class="price nowrap"><text>￥</text>365 <text>/年</text></view>
</view>
<view class="the-flex-item"
@click="onView('Enterprise')"
>
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_02.png') + ');'"></view>
<view class="title nowrap">企业全年法律</view>
<view class="price nowrap"><text>￥</text>3650 <text>/年</text></view>
</view>
<view class="the-flex-item"
@click="onView('Enterprise')"
>
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_04.png') + ');'"></view>
<view class="title nowrap">企业全年法律</view>
<view class="price nowrap"><text>￥</text>8888 <text>/年</text></view>
</view>
<view class="the-flex-item"
@click="onView('Enterprise')"
>
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_05.png') + ');'"></view>
<view class="title nowrap">企业全年法律</view>
<view class="price nowrap"><text>￥</text>20000 <text>/年</text></view>
</view>
<view class="the-flex-item"
@click="onView('Enterprise')"
>
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_06.png') + ');'"></view>
<view class="title nowrap">企业全年法律</view>
<view class="price nowrap"><text>￥</text>50000 <text>/年</text></view>
</view>
</scroll-view>
</view>
<!-- 诉讼委托类 -->
<view class="block">
<view class="block-title">
<view class="title">诉讼委托类</view>
</view>
<view class="lawsuit">
<view class="lawsuit-item" @click="onView('Entrust')">
<view class="lawsuit-cover" :style="'background-image: url(' + require('@/static/synthesize/img_01.png') + ');'"></view>
<view class="lawsuit-text">
<view class="lawsuit-title">案件委托</view>
<view class="lawsuit-price">￥200</view>
</view>
</view>
<view class="zong-list-item" @click="onView('Entrust')">
<image class="cover" src="@/static/synthesize/img_01.png" mode="aspectFill" />
<view class="colum-flex">
<view>
<view class="title nowrap">案件委托</view>
<view class="subtitle">咨询服务 抖火法律</view>
</view>
<view class="price nowrap"><text>￥</text>200元起</view>
</view>
</view>
<view class="zong-list-item" @click="onView('Enterprise')">
<image class="cover" src="@/static/synthesize/img_02.png" mode="aspectFill" />
<view class="colum-flex">
<view>
<view class="title nowrap">企业全年法律</view>
<view class="subtitle">咨询服务 抖火法律</view>
</view>
<view class="price nowrap"><text>￥</text>3650.00起/年</view>
</view>
</view>
<view class="zong-list-item" @click="onView('Service')">
<image class="cover" src="@/static/synthesize/img_03.png" mode="aspectFill" />
<view class="colum-flex">
<view>
<view class="title nowrap">拓展服务</view>
<view class="subtitle">咨询服务 抖火法律</view>
</view>
<view class="price nowrap"><text>￥</text>500元起</view>
<view class="lawsuit-item" @click="onView('Service')">
<view class="lawsuit-cover" :style="'background-image: url(' + require('@/static/synthesize/img_03.png') + ');'"></view>
<view class="lawsuit-text">
<view class="lawsuit-title">拓展服务</view>
<view class="lawsuit-price">￥500</view>
</view>
</view>
</view>
@@ -217,7 +239,7 @@
duration:2000
})
})
},// 获取综法列表
},
// 首页轮播图及公告
getIndex(){
index().then(res=>{
@@ -270,10 +292,6 @@
this.getJf()
}
},
// 选择城市节点
onCityPicker(e){
this.getRegion(e.value);
},
// 点击轮播图
swiperClick(e){
// console.log(this.bannerArr[e])
@@ -282,14 +300,6 @@
onView(name){
this.$Router.push({ name })
},
// 获取城市数据
getRegion(id){
region({
parent_id: id
}).then(res => {
console.log(res)
})
},
// 关闭弹窗广告
onRemoveAd(){
this.first = 0;
@@ -348,7 +358,7 @@
width: 100%;
}
}
// 轮播
// 公告
.notice{
background: white;
padding: $padding;
@@ -393,51 +403,40 @@
width: 100%;
}
}
// 综法
.zong-list{
padding: 0 $padding 20rpx;
margin-bottom: 30rpx;
// 诉讼委托类
.lawsuit{
padding: 0 20rpx $padding;
display: flex;
justify-content: space-between;
&-item{
position: relative;
margin-bottom: 30rpx;
padding-left: 210rpx;
height: 180rpx;
.cover{
position: absolute;
left: 0;
top: 0;
width: 180rpx;
height: 180rpx;
}
.colum-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 180rpx;
.title{
font-size: 34rpx;
color: #111111;
line-height: 40rpx;
margin-bottom: 10rpx;
@extend .nowrap;
}
.subtitle{
font-size: 28rpx;
color: gray;
line-height: 40rpx;
@extend .nowrap;
}
.price{
font-weight: bold;
color: #d51959;
font-size: 36rpx;
line-height: 40rpx;
text{
font-size: 80%;
}
@extend .nowrap;
}
}
background: #F6F6F6;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
width: calc(50% - 20rpx);
margin: 0 10rpx;
}
&-cover{
width: 138rpx;
height: 138rpx;
background-size: cover;
background-position: center;
}
&-text{
width: calc(100% - 138rpx);
padding: 0 20rpx;
box-sizing: border-box;
}
&-title{
font-size: 30rpx;
margin-bottom: 20rpx;
}
&-price{
font-size: 32rpx;
color: #d51959;
font-weight: bold;
}
}
// 经法
@@ -479,18 +478,23 @@
padding: $padding 20rpx;
box-sizing: border-box;
white-space: nowrap;
&-item{
width: calc(33.33% - 20rpx);
width: calc(33% - 20rpx);
margin: 0 10rpx;
display: inline-block;
&:last-child{
margin-right: 20rpx;
}
.cover{
width: 100%;
height: 200rpx;
padding-top: 100%;
background-position: center;
background-size: cover;
background-position: center;
border-radius: 10rpx;
}
.title{
font-size: 28rpx;
font-size: 30rpx;
color: #111111;
padding: 10rpx 0;
line-height: 40rpx;
@@ -499,7 +503,7 @@
line-height: 40rpx;
font-weight: bold;
color: #d51959;
font-size: 38rpx;
font-size: 32rpx;
text{
font-size: 80%;
}