pages/sub_index/question.vue

<template>
	<view class="question">
		<!-- <view class="question-header">
			<u-search placeholder="搜索问题关键词" v-model="keyword" :show-action="false" bg-color="#ffffff" @search="search"></u-search>
		</view> -->
		<view class="question-con">
			<u-collapse arrow-color="#999999">
				<u-collapse-item  v-for="(item, index) in list" :key="index">
					<view slot="title" class="question-con-item-title">
						<view class="question-con-item-title-index">{{ (index+1) < 10 ? '0'+(index + 1):(index+1)}}</view>
						<text class="question-con-item-title-title">{{item.title}}</text>
					</view>
					<view class="question-con-item-con">
						<text>{{item.content}}</text>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				list:[]
			}
		},
		methods: {
			search(e){
				uni.showToast({
					icon: "none",
					title: "搜索服务功能暂未开通",
					duration: 1500
				})
			},
			getQuestionList(){
				let that = this
				let params = {
					pageno:1,
					pagesize:20
				}
				that.$u.get("/i/advisory/list",params).then(res=>{
					that.list = res.data.list
					//console.log(that.list)
				})
			}
		},
		onLoad(){
			let that = this
			that.getQuestionList()
		}
	}
</script>

<style lang="scss" scoped>
	.u-collapse-head{
		padding: 30rpx 0;
	}
	.question {
		overflow: hidden;
		&-header {
			width: 700rpx;
			margin: 30rpx auto;
			font-family: "PingFang-SC-Medium";
		}
		&-con{
			background-color: #FFFFFF;
			padding: 30rpx;
			margin-top: 30rpx;
			&-item{
				&-con{
					padding: 0 60rpx;
					font-size: 28rpx;
				}
				&-title{
					display: flex;
					align-items: center;
					
					&-title{
						font-size: 30rpx;
					}
					&-index{
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #2FA8E1;
						padding: 10rpx;
						color: #FFFFFF;
						margin-right: 20rpx;
						border-radius: 10rpx;
						border-bottom-left-radius: 0;
						position: relative;
						font-size: 20rpx;
						&::after{
							content: "";
							position: absolute;
							width: 0;
							height: 0;
							bottom: -10rpx;
							left: 0;
							border-left: 12rpx #2FA8E1 solid;
							border-top: 12rpx transparent solid;
							border-right: 12rpx transparent solid;
							border-bottom: 12rpx transparent solid;
						}
					}
				}
			}
		}
	}
</style>