163 lines
4.6 KiB
Vue
163 lines
4.6 KiB
Vue
<template>
|
||
<div class="itemBox">
|
||
<div class="itemBoxHead">
|
||
<u-icon name="file-text"></u-icon>
|
||
<div class="text" :class="{ danger: this.data.danger }">
|
||
{{ this.data.name + (this.data.danger?'「汛」':'')}}
|
||
</div>
|
||
<image v-if="this.data.isStar" src="../../static/images/star.svg" class="starImg"></image>
|
||
<image v-else src="../../static/images/star2.svg" class="starImg"></image>
|
||
<div class="rl" @click="myNavigateTo">
|
||
更多
|
||
<u-icon name="arrow-right-double" size="16"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="itemBoxBody">
|
||
<view class="image-wrapper">
|
||
<image src="../../static/images/skImg.png" class="skImg"></image>
|
||
</view>
|
||
<view class="image-wrapper-rl">
|
||
<div class="videoList">
|
||
<div v-for="item in this.data.videoList" class="videoListItem">
|
||
<image src="../../static/images/video.svg" class="videoImg"></image>
|
||
<div style="flex:1">{{ item.name }}</div>
|
||
<image src="../../static/images/videoPlay.svg" class="videoPlayImg"></image>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "moment";
|
||
|
||
export default {
|
||
components: {
|
||
},
|
||
props:{
|
||
data:Object,
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
methods: {
|
||
myNavigateTo() {
|
||
uni.navigateTo({
|
||
url: '/pages/rain/rain', // 跳转到对应路径的页面
|
||
});
|
||
},
|
||
},
|
||
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||
created() {
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.itemBox{
|
||
padding: 5px;
|
||
.itemBoxHead{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
font-size: 14px;
|
||
height: 30px;
|
||
// padding: 10px 0;
|
||
.text{
|
||
margin: 0 5px;
|
||
}
|
||
.danger{
|
||
color: #F59823;
|
||
}
|
||
.starImg{
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.rl{
|
||
position: absolute;
|
||
font-size: 12px;
|
||
padding: 0 5px;
|
||
right: 0px;
|
||
top: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.rl:active {
|
||
background-color: #eee; /* 变深色 */
|
||
transform: scale(0.97); /* 轻微缩小 */
|
||
opacity: 0.8;
|
||
}
|
||
|
||
}
|
||
.itemBoxBody{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: start;
|
||
justify-content: center;
|
||
padding: 5px 10px;
|
||
.image-wrapper{
|
||
width: 35%; /* 父元素宽度的30% */
|
||
position: relative;
|
||
/* 关键：padding-top 百分比相对于父元素宽度，100% 表示高度 = 宽度 */
|
||
padding-top: 35%;
|
||
.skImg{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.image-wrapper-rl{
|
||
display: flex;
|
||
flex: 1;
|
||
position: relative;
|
||
padding-top: 35%;
|
||
margin-right: 10px;
|
||
|
||
.videoList{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 10px;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: start;
|
||
|
||
.videoListItem{
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
height: 28px;
|
||
|
||
.videoImg{
|
||
width: 16px;
|
||
height: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
.videoPlayImg{
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
.videoPlayImg:active {
|
||
background-color: #eee; /* 变深色 */
|
||
transform: scale(0.97); /* 轻微缩小 */
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|