105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<template>
|
||
<view class="min-height bg-main-light">
|
||
<HeaderItem title="常见问题解答"/>
|
||
<view class="bg-white p-20 text-25 flex justify-start items-center overflow-x">
|
||
<text v-for="(item, index) in typeList" :key="index" class="tag"
|
||
@click="changeType(index)"
|
||
:class="[item.id === activeId ? 'selected-tag' : '']">{{ item.title }}
|
||
</text>
|
||
</view>
|
||
<view class="pos-r">
|
||
<view class="circle-bottom-bg"></view>
|
||
<view class="tips-card-wrap">
|
||
<view class="tips-card">
|
||
<view class="text-28 font-bold text-center">{{ activeTitle }}</view>
|
||
<view class="text-25 mt-20" style="padding-bottom: 50rpx">
|
||
请你根据实际情况对以下问题进行勾选，人工智能小律将根据你勾选的信息提供相关的法律服务，出具针对性的法律意见书。本项咨询将回答有关林地纠纷中常见纠纷的相关问题。
|
||
</view>
|
||
</view>
|
||
<u-button shape="circle" @click="$jump(`/legalOrgCheckSuggest/pages/detail?id=${activeId}&title=${activeTitle}`)"
|
||
:customStyle="{background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%)',
|
||
border: 0, width: '200rpx',
|
||
color: 'white'}">
|
||
开始咨询
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeaderItem from "@/components/HeaderItem.vue";
|
||
import {listLegalOrgCheckTypeSuggestReq} from "@/api/legalOrgCheckSuggest";
|
||
|
||
export default {
|
||
name: "index",
|
||
components: {HeaderItem},
|
||
data() {
|
||
return {
|
||
typeList: [],
|
||
activeId: 0,
|
||
activeTitle: 0,
|
||
}
|
||
},
|
||
methods: {
|
||
async getTypeList() {
|
||
const {data} = await listLegalOrgCheckTypeSuggestReq()
|
||
this.typeList = data
|
||
this.activeId = data[0].id
|
||
this.activeTitle = data[0].title
|
||
},
|
||
changeType(index){
|
||
this.activeId = this.typeList[index].id
|
||
this.activeTitle = this.typeList[index].title
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getTypeList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tag {
|
||
padding: 10rpx 25rpx;
|
||
margin-right: 25rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.selected-tag {
|
||
background-color: #FFCA68;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.circle-bottom-bg {
|
||
background-color: #1DBCBC;
|
||
width: 100vw;
|
||
height: 200rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
border-radius: 0 0 100vw 100vw;
|
||
}
|
||
|
||
.tips-card-wrap {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 70rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.tips-card {
|
||
width: 80%;
|
||
line-height: 30rpx;
|
||
padding: 30rpx;
|
||
border-radius: 50rpx;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(16, 16, 16, 1);
|
||
box-shadow: 0 2px 6px 0 rgba(202, 247, 247, 1);
|
||
margin-bottom: 50rpx;
|
||
}
|
||
}
|
||
</style> |