124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<template>
|
|
<view class="box" style="position: relative;">
|
|
<view style="height: 30rpx;"></view>
|
|
<view class="">
|
|
<block v-for="(item, index) in list" :key="index">
|
|
<view class="card">
|
|
<view class="card-tit">
|
|
<view class="" style="font-size: 32rpx;display: flex;align-items: center;">
|
|
<view class="">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="" style="display: flex;align-items: center;" @click='open(index)'>
|
|
展开
|
|
<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png" width="24rpx"
|
|
height="24rpx" class='icon' :style=" {transform:isOpen[index]? 'rotate(180deg)' :'rotate(0)'} " />
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="card-content" :style="{height:isOpen[index]?'0':'auto',padding: isOpen[index]?'0':'20rpx' } "
|
|
style="height: 0;padding: 0;">
|
|
<view id="formheight1">
|
|
<view class="content" v-if="!isOpen[index]" v-html="item.content.content"></view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<u-empty :show="list.length == 0" mode="list" text="没有找到数据呢" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getArticleList } from "@/api/api.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
isOpen: [],
|
|
list: [],
|
|
}
|
|
},
|
|
computed: {},
|
|
onReady() {},
|
|
onLoad() {
|
|
this.getArticleList();
|
|
},
|
|
methods: {
|
|
getArticleList() {
|
|
getArticleList(27).then(res => {
|
|
res.data.list.forEach(e => {
|
|
e.content.content = e.content.content.replace(/\<video /g, '<video style="width: 100%; background-color: #888888;" ');
|
|
this.isOpen.push(true);
|
|
})
|
|
this.list = res.data.list;
|
|
})
|
|
},
|
|
open(index) {
|
|
this.isOpen.forEach((item, i) => {
|
|
if (i == index) {
|
|
this.isOpen.splice(index, 1, this.isOpen[index] ? false : true);
|
|
} else {
|
|
this.isOpen.splice(i, 1, true);
|
|
}
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
background: linear-gradient(to bottom, #FFF4DB, #FFEAC3);
|
|
min-height: 100vh;
|
|
font-size: 28rpx;
|
|
padding-bottom: 5vh;
|
|
}
|
|
|
|
.tit {
|
|
display: flex;
|
|
width: 638rpx;
|
|
margin: 230rpx auto 30rpx;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
}
|
|
|
|
.card {
|
|
width: 686rpx;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
padding: 30rpx;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
|
|
.card-tit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
}
|
|
|
|
.card-content {
|
|
background-color: #FFE7B9;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
overflow: hidden;
|
|
transition: 300ms;
|
|
width: 690rpx;
|
|
margin: 18rpx auto;
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: hidden;
|
|
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 10rpx;
|
|
transform: translateY(2rpx);
|
|
transition: 300ms !important;
|
|
}
|
|
</style> |