[抖火客户端]

pages/synthesis/expandBrief.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="content">
+		<image class="expandImg" src="https://cdn.douhuofalv.com/images/2023/04/19/df2ecf6ece3e59de1d51c4ad09aa68f3.jpg" mode="widthFix"></image>
+		<view class="list">
+			<view class="list-title">
+				<view class="list-title-number">expand</view>
+				<view class="list-title-name">法律服务拓展包</view>
+				<view class="list-title-trim"></view>
+			</view>
+			<view class="list-item">
+				<view class="list-label" v-for="(item, index) in entrustArr" :key="index" @click="$Router.push({name: 'ExpandWrite', params: {entrustId: item.expand_id}})">
+					<view class="list-label-name">
+						{{item.title}}
+					</view>
+					<view class="list-label-price"><rich-text :nodes="item.content"></rich-text></view>
+					<view class="list-label-go">咨询</view>
+				</view>
+			</view>
+		</view>
+		<image class="expandBttom" src="https://cdn.douhuofalv.com/images/2023/04/17/fc4cad00a630e3d69b3f486e9d2937e9.png" mode="widthFix"></image>
+	</view>
+</template>
+
+<script>
+	import { expandsList } from '@/apis/interfaces/synthesis'
+	export default {
+		data() {
+			return {
+				entrustArr: [],  //案件委托列表
+			}
+		},
+		
+		created() {
+			// 获取-案件委托-列表
+			this.yearServe();
+		},
+		
+		methods: {
+			// 案件委托-列表
+			yearServe(){
+				expandsList().then(res => {
+					console.log(res)
+					this.entrustArr = res
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		background-color: #121d4c;
+	}
+	
+	.expandImg,
+	.expandBttom{
+		width: 100%;
+		display: block;
+	}
+	
+	.list {
+		padding: 0 30rpx 30rpx;
+		box-sizing: border-box;
+		background-color: #121d4c;
+		.list-title {
+			font-size: 36rpx;
+			margin-bottom: 40rpx;
+			color: #ffffff;
+			.list-title-trim {
+				position: relative;
+				left: 390rpx;
+				bottom: 28rpx;
+				background-color: #2f3aae;
+				width: 35%;
+				height: 4rpx;
+				padding-left: 40rpx;
+				box-sizing: border-box;
+				&::after {
+					position: absolute;
+					content: '';
+					left: -50rpx;
+					top: -10rpx;
+					width: 20rpx;
+					height: 20rpx;
+					transform:rotate(45deg);
+					background-color: #2f3aae;
+				}
+			}
+			.list-title-number {
+				font-weight: 600;
+				font-size: 58rpx;
+				background-image: -webkit-linear-gradient(top,#ffffff 40%, transparent 70%);
+				-webkit-background-clip:text; 
+				-webkit-text-fill-color:transparent;
+				text-transform: uppercase;
+			}
+			.list-title-name {
+				font-size: 44rpx;
+				margin-top: -20rpx;
+				width: 390rpx;
+			}
+		}
+		.list-item {
+			position: relative;
+			padding-left: 100rpx;
+			box-sizing: border-box;
+			&::after {
+				position: absolute;
+				content: '';
+				left: 10rpx;
+				top: 0;
+				border-left: 4rpx dashed #3b46d6;
+				width: 0;
+				height: calc(100% - 64rpx);
+			}
+			.list-label {
+				background-image: linear-gradient(to right,#3d48dd, #1f2a6f);
+				padding: 15rpx 40rpx 15rpx 90rpx;
+				box-sizing: border-box;
+				border-radius: 80rpx 15rpx 15rpx 80rpx;
+				margin-bottom: 30rpx;
+				color: #ffffff;
+				position: relative;
+				&::before {
+					position: absolute;
+					content: '';
+					left: -88rpx;
+					top: calc(50% - 1rpx);
+					border-bottom: 4rpx dashed #3b46d6;
+					width: 60rpx;
+					height: 0;
+				}
+				&::after {
+					position: absolute;
+					content: '';
+					left: 40rpx;
+					top: calc(50% - 9rpx);
+					background-color: #091443;
+					width: 18rpx;
+					height: 18rpx;
+					border-radius: 50%;
+				}
+				.list-label-name {
+					margin-bottom: 5rpx;
+				}
+				.list-label-price {
+					line-height: 48rpx;
+				}
+				.list-label-go {
+					position: absolute;
+					right: 30rpx;
+					top: 35rpx;
+					background-image: -webkit-linear-gradient(40deg,#f1c593, #fef9f2);
+					color: #12053d;
+					display: inline-block;
+					line-height: 54rpx;
+					padding: 0 35rpx;
+					border-radius: 54rpx;
+					font-size: 28rpx;
+					font-weight: 600;
+				}
+			}
+		}
+	}
+</style>