smartFactory/pages/plan/details.vue

<template>
	<view class="content">
		<block v-if="detail">
			<!-- 顶部图片 -->
			<image class="top" v-if="detail.img" :src="detail.img" mode="widthFix" data-aos="fade-down"></image>
			<view class="headline">
				<view class="title" v-if="detail.industry" data-aos="slide-right" data-aos-delay="200">行业：<span>{{detail.industry}}</span></view>
				<view class="title" v-if="detail.scheme" data-aos="slide-right" data-aos-delay="400">方案：<span>{{detail.scheme}}</span></view>
				<view class="title" v-if="detail.client" data-aos="slide-right" data-aos-delay="600">客户：<span>{{detail.client}}</span></view>
			</view>
			<image class="line" src="../../static/imgs/line.png"></image>
			<view class="boxs" v-if="detail.descriptions&&detail.descriptions.length">
				<view class="box">
					<view class="box2" v-for="(item,index) in detail.descriptions" :key="index" data-aos="slide-left">
						<view class="b_title">{{item.title}}</view>
						<view class="intro">
							<u-parse :content="item.content"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { data } from '../plan/data.js'
	export default {
		data(){
			return {
				detail:null
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title:'案例'
			})
		},
		onLoad(option) {
			if(option.id&&option.key){
				this.getDetails(option.id,option.key);
			}
		},
		methods:{
			getDetails(id,key){
				let temp = data[key];
				if(temp.length){ 
					this.detail = temp.find(t=>t.id == id).details || null;
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		overflow-x: hidden;
		padding-bottom: 100rpx;
		
		.top{
			width: 100%;
		}
		
		.headline{
			width: 100%;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			.title{
				margin-top: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				line-height: 42rpx;
				text-align: left;
				span{
					margin-left: 20rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		
		.line{
			width: 100%;
			height: 6rpx;
			margin: 30rpx 0 40rpx;
		}
		
		.boxs{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.box{
				overflow: hidden;
				.box2{
					width: 100%;
					height: 100%;
					margin-top: 48rpx;
					overflow: hidden;
					&:first-child{
						margin-top: 0;
					}
				}
				
				.b_title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 45rpx;
					letter-spacing: 2rpx;
				}
				
				.intro{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 48rpx;
					margin-top: 20rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>