cte-share/components/fenleiList/fenleiList - 副本.vue

<template>
	<view v-if="objList.length==6" class="item_list6">
		<view class="item_content">
			<view class="contentV" style="height: 360rpx;" @click="fenleixuanz(objList[0].id)">
				<view class="">
					<view class="title ztextfontB3">
						<text>{{objList[0].title}}</text>
					</view>
					<view class="detail towrow textfontB5" style="width: 260rpx;">
						<text>{{objList[0].detail}}</text>
					</view>
				</view>
				<view class="viewInRow">
					<netImage class="imagIconB" backgrS="1" width="190" height="190" :mysrc="objList[0].imageUrl" mymode="scaleToFill"></netImage>
				</view>
			</view>
			<view class="contentV" style="height: 220rpx;" @click="fenleixuanz(objList[1].id)">
				<view class="title textfontB5">
					<text>{{objList[1].title}}</text>
				</view>
				<view class="viewInRow">
					<text class="detail textfontB4">{{objList[1].detail}}</text>
					<netImage class="imagIconM" backgrS="1" width="136" height="136" :mysrc="objList[1].imageUrl" mymode="scaleToFill"></netImage>
				</view>
			</view>
			<view class="contentV" style="height: 150rpx;" @click="fenleixuanz(objList[2].id)">
				<view class="viewInRow">
					<view>
						<view class="title ztextfontB3">
							<text>{{objList[2].title}}</text>
						</view>
						<view class="detail textfontB5">
							<text >{{objList[2].detail}}</text>
						</view>
					</view>
					<netImage class="imagIconS" backgrS="1" width="120" height="120" :mysrc="objList[2].imageUrl" mymode="scaleToFill"></netImage>
				</view>
			</view>
		</view>
		
		<view class="item_content">
			<view class="contentV" style="height: 220rpx;" @click="fenleixuanz(objList[3].id)">
				<view class="title ztextfontB3">
					<text>{{objList[3].title}}</text>
				</view>
				<view class="viewInRow">
					<view class="detail textfontB5">
						<text>{{objList[3].detail}}</text>
					</view>
					<netImage class="imagIconM" backgrS="1" width="126" height="126" :mysrc="objList[3].imageUrl" mymode="scaleToFill"></netImage>
				</view>
			</view>
			<view class="contentV" style="height: 270rpx;" @click="fenleixuanz(objList[4].id)">
				<view class="">
					<view class="title ztextfontB3">
						<text>{{objList[4].title}}</text>
					</view>
					<text class="detail onerow textfontB5">{{objList[4].detail}}</text>
				</view>
				<view class="viewInRow">
					<netImage class="imagIconBL" backgrS="1" width="130" height="130" :mysrc="objList[4].imageUrl" mymode="scaleToFill"></netImage>
				</view>
			</view>
			<view class="contentV" style="height: 240rpx;" @click="fenleixuanz(objList[5].id)">
				<view class="title ztextfontB3">
					<text>{{objList[5].title}}</text>
				</view>
				<view class="viewInRow">
					<text class="detail textfontB5">{{objList[5].detail}}</text>
					<netImage class="imagIconM" backgrS="1" width="140" height="140" :mysrc="objList[5].imageUrl" mymode="scaleToFill"></netImage>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				listsize:0,
				objList:[],
				fenleiList:[],
				
			};
		},
		
		methods:{
			getfenleiList(){
				api('fwlxlist',{
					pageNum:1,
					pageSize:20
				},res=>{
					if(res.data.code!=200){
						return;
					}
					this.initListObj(res.data.rows)
					//console.log('1111333333',res);
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			initListObj(list){
				this.listsize=list.length;
				this.objList=[];
				var tmpList=[];
				var language = uni.getStorageSync('language');
				if(language=='yuenan'){
					for(var i=0;i<this.listsize;i++){
						var obj={
							id:list[i].id,
							imageUrl:list[i].image,
							title:list[i].nameVi,
							detail:list[i].illustrateVi
						};
						tmpList.push(obj);
					}
				}
				else if(language=='zh-Hans'){
					for(var i=0;i<this.listsize;i++){
						var obj={
							id:list[i].id,
							imageUrl:list[i].image,
							title:list[i].nameCn,
							detail:list[i].illustrateCn
						};
						tmpList.push(obj);
					}
				}
				else if(language=='zh-Hant'){
					for(var i=0;i<this.listsize;i++){
						var obj={
							id:list[i].id,
							imageUrl:list[i].image,
							title:list[i].nameTw,
							detail:list[i].illustrateTw
						};
						tmpList.push(obj);
					}
				}
				this.objList=tmpList;
				
			},
			fenleixuanz(e){
				this.$emit('Efwflxuanze',e);
			},
		},
	}
</script>

<style lang="scss">
@font-face {
	font-family: zrht;
	src: url('/uni_modules/font/zrht.otf');
}
	.item_list6{
		padding: 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		background-color: #F2F3F7;
	}
	.item_content{
		width: 48%;
		margin: 20rpx 0;
		box-sizing: border-box;
	}
	.contentV{
		margin-top: 20rpx;
		background: white;
		align-items: center;
		border-radius: 12rpx;
		border: 1rpx solid lightgrey;
		box-shadow: 0rpx 0rpx 10rpx 0rpx lightgrey;
	}
	
	.viewInRow{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.title{
		margin: 14rpx;
		color:black;
		font-weight:bold;
	}
	.detail{
		margin-left: 14rpx;
		color:black;
	}
	.imagIconB{
		margin-left: auto;
		margin-top: 0rpx;
		margin-right: 6rpx;
		margin-bottom: 0rpx;
		width: 230rpx;
		height: 230rpx;
	}
	.imagIconBL{
		margin-left: auto;
		margin-top: 0rpx;
		margin-right: 6rpx;
		margin-bottom: 0rpx;
		width: 130rpx;
		height: 130rpx;
	}
	.imagIconM{
		margin-left: auto;
		margin-top: 0rpx;
		margin-right: 6rpx;
		margin-bottom: 0rpx;
		width: 136rpx;
		height: 136rpx;
	}
	.imagIconS{
		margin-left: auto;
		margin-right: 6rpx;
		margin-top: 10rpx;
		width: 120rpx;
		height: 120rpx;
	}
	.towrow{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.onerow{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
		
</style>