From 594927f5964ecc85dc942e32eb03a9bca551f865 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 28 二月 2024 15:54:28 +0800
Subject: [PATCH] feat:安全隐患情况和交通宣传模块渲染
---
src/views/daoAnOffice/right/analysis/index.vue | 44 ++++
src/assets/img/icon/arrow_left.png | 0
src/assets/img/test_img/道安办 (1).png | 0
src/components/right-title/index.ts | 2
package-lock.json | 19 +
src/assets/img/icon/arrow_right.png | 0
src/main.ts | 1
src/components/right-title/index.vue | 80 +++++++
src/views/daoAnOffice/right/publicize/index.vue | 153 +++++++++++++
package.json | 1
src/assets/img/test_img/道安办.png | 0
src/views/daoAnOffice/right/danger/index.vue | 151 +++++++++++++
src/views/daoAnOffice/index.vue | 125 +++++++----
src/assets/img/test_img/道安办 (2).png | 0
src/views/daoAnOffice/right/danger/imageSwiper.vue | 64 +++++
15 files changed, 596 insertions(+), 44 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index f4447b6..9fc45bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
"element-plus": "^2.3.14",
"mockjs": "^1.1.0",
"pinia": "^2.1.6",
+ "swiper": "^11.0.7",
"vue": "^3.3.4",
"vue-echarts": "^6.6.1",
"vue-router": "^4.2.5"
@@ -3187,6 +3188,24 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/swiper": {
+ "version": "11.0.7",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.7.tgz",
+ "integrity": "sha512-cDfglW1B6uSmB6eB6pNmzDTNLmZtu5bWWa1vak0RU7fOI9qHjMzl7gVBvYSl34b0RU2N11HxxETJqQ5LeqI1cA==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ },
"node_modules/tailwindcss": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/package.json b/package.json
index eea03bd..dd736d4 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"element-plus": "^2.3.14",
"mockjs": "^1.1.0",
"pinia": "^2.1.6",
+ "swiper": "^11.0.7",
"vue": "^3.3.4",
"vue-echarts": "^6.6.1",
"vue-router": "^4.2.5"
diff --git a/src/assets/img/icon/arrow_left.png b/src/assets/img/icon/arrow_left.png
new file mode 100644
index 0000000..7505ce9
--- /dev/null
+++ b/src/assets/img/icon/arrow_left.png
Binary files differ
diff --git a/src/assets/img/icon/arrow_right.png b/src/assets/img/icon/arrow_right.png
new file mode 100644
index 0000000..25edf0f
--- /dev/null
+++ b/src/assets/img/icon/arrow_right.png
Binary files differ
diff --git "a/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236 \0501\051.png" "b/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236 \0501\051.png"
new file mode 100644
index 0000000..c7f70a4
--- /dev/null
+++ "b/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236 \0501\051.png"
Binary files differ
diff --git "a/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236 \0502\051.png" "b/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236 \0502\051.png"
new file mode 100644
index 0000000..c7f70a4
--- /dev/null
+++ "b/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236 \0502\051.png"
Binary files differ
diff --git "a/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236.png" "b/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236.png"
new file mode 100644
index 0000000..c7f70a4
--- /dev/null
+++ "b/src/assets/img/test_img/\351\201\223\345\256\211\345\212\236.png"
Binary files differ
diff --git a/src/components/right-title/index.ts b/src/components/right-title/index.ts
new file mode 100644
index 0000000..9d79131
--- /dev/null
+++ b/src/components/right-title/index.ts
@@ -0,0 +1,2 @@
+import RightTitle from "./index.vue"
+export default RightTitle
\ No newline at end of file
diff --git a/src/components/right-title/index.vue b/src/components/right-title/index.vue
new file mode 100644
index 0000000..8ae1a09
--- /dev/null
+++ b/src/components/right-title/index.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+
+const props = withDefaults(
+ defineProps<{
+ // 鏍囬
+ title: number | string,
+ }>(),
+ {
+ title: "",
+ }
+);
+</script>
+
+<template>
+ <div class="flex justify-between item-center">
+ <div class="item_title" v-if="title !== ''">
+ <span class="title-inner"> {{ title }} </span>
+ </div>
+ <slot name="top"></slot>
+ </div>
+
+ <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
+
+ <!-- 鍐呭鎻掓Ы -->
+ <slot name="content"></slot>
+ </div>
+</template>
+
+<style scoped lang="scss">
+$item-title-height: 38px;
+//$item_title_content-height: calc(100% - 38px);
+
+.item_title {
+ background-image: url("@/assets/img/candantop.png");
+ background-size: 231px 100%;
+ background-repeat: no-repeat;
+ height: $item-title-height;
+ line-height: $item-title-height;
+ width: 100%;
+ color: #31abe3;
+ text-align: center;
+ // background: linear-gradient(to right, transparent, #0f0756, transparent);
+ position: relative;
+ display: flex;
+ align-items: center;
+ //justify-content: center;
+
+ .title-inner {
+ margin-left: 15px;
+ color: #fff;
+ font-weight: 900;
+ letter-spacing: 2px;
+ font-style: italic;
+ font-size: 20px;
+ //background: linear-gradient(
+ // 92deg,
+ // #0072ff 0%,
+ // #00eaff 48.8525390625%,
+ // #01aaff 100%
+ //);
+ //-webkit-background-clip: text;
+ //-webkit-text-fill-color: transparent;
+ }
+}
+
+:deep(.dv-border-box-content) {
+ box-sizing: border-box;
+ padding: 6px 16px 0px;
+}
+
+.item_title_content {
+ //height: $item_title_content-height;
+ margin: 20px 0;
+}
+
+.item_title_content_def {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 4472f45..ffc8509 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@/assets/css/main.scss'
import '@/assets/css/tailwind.css'
+import 'swiper/swiper-bundle.css';
import {registerEcharts} from "@/plugins/echarts"
//涓嶄娇鐢╩ock 璇锋敞閲婃帀
diff --git a/src/views/daoAnOffice/index.vue b/src/views/daoAnOffice/index.vue
index 9cdbb22..56e75c5 100644
--- a/src/views/daoAnOffice/index.vue
+++ b/src/views/daoAnOffice/index.vue
@@ -12,8 +12,14 @@
import RightBottom from "./right-bottom.vue";
import chart2 from "./chart2.vue";
import BorderBox13 from "@/components/datav/border-box-13";
+
+// 鍙宠竟閮ㄥ垎
+import Analysis from './right/analysis/index.vue';
+import Danger from './right/danger/index.vue';
+import Publicize from './right/publicize/index.vue';
+
const config = {
- header: ['<span style="color:#42C3E8;font-size: 16px">鎺掑悕</span>', '<span style="color:#42C3E8;font-size: 16px">琛屾斂鍖哄垝</span>','<span style="color:#42C3E8;font-size: 16px">鏁板��</span>'],
+ header: ['<span style="color:#42C3E8;font-size: 16px">鎺掑悕</span>', '<span style="color:#42C3E8;font-size: 16px">琛屾斂鍖哄垝</span>', '<span style="color:#42C3E8;font-size: 16px">鏁板��</span>'],
data: [
['1', '澶╅┈闀�', '45'],
['5', '鐏屽彛琛楅亾', '21'],
@@ -29,44 +35,44 @@
// index: true,
// columnWidth: [50],
align: ['center'],
- headerBGC:"rgba(0,0,0,0.5)",
+ headerBGC: "rgba(0,0,0,0.5)",
}
-const config1 = [{
- title:'姣涘彂鎶芥鎶ラ亾鐜�',
+const config1 = [{
+ title: '姣涘彂鎶芥鎶ラ亾鐜�',
length: 10,
-},{
- title:'姣涘彂鎶芥闃虫�х巼',
+}, {
+ title: '姣涘彂鎶芥闃虫�х巼',
length: 90,
-},{
- title:'鎴掓柇涓夊勾鏈鍚镐汉鍛樻煡澶�',
+}, {
+ title: '鎴掓柇涓夊勾鏈鍚镐汉鍛樻煡澶�',
length: 82,
-},{
- title:'鍦ㄥ唽鍚告瘨浜哄憳婊嬩簨琛屼负',
+}, {
+ title: '鍦ㄥ唽鍚告瘨浜哄憳婊嬩簨琛屼负',
length: 130,
-},{
- title:'鏄撳埗姣掑寲瀛﹀搧绠℃帶闂',
+}, {
+ title: '鏄撳埗姣掑寲瀛﹀搧绠℃帶闂',
length: 110,
-},{
- title:'杈栧尯鍐呭嚭鐜拌仛闆嗘互鐢ㄧ獫鐐规暟',
+}, {
+ title: '杈栧尯鍐呭嚭鐜拌仛闆嗘互鐢ㄧ獫鐐规暟',
length: 9,
}]
-const config2 = [{
- title:'澶栨祦娑夋瘨浜哄憳鏁�',
+const config2 = [{
+ title: '澶栨祦娑夋瘨浜哄憳鏁�',
length: 10,
-},{
- title:'鏂板彂鐜板惛姣掍汉鍛樻暟',
+}, {
+ title: '鏂板彂鐜板惛姣掍汉鍛樻暟',
length: 90,
-},{
- title:'姣掑搧涓浆闆嗘暎鏁伴噺',
+}, {
+ title: '姣掑搧涓浆闆嗘暎鏁伴噺',
length: 82,
-},{
- title:'鏈垚骞存秹姣掍汉鍛樻暟',
+}, {
+ title: '鏈垚骞存秹姣掍汉鍛樻暟',
length: 130,
-},{
- title:'鍒舵瘨绐濈偣鏁伴噺',
+}, {
+ title: '鍒舵瘨绐濈偣鏁伴噺',
length: 110,
-},{
- title:'澶栧崗婧簮琚煡鑾锋暟',
+}, {
+ title: '澶栧崗婧簮琚煡鑾锋暟',
length: 9,
}]
</script>
@@ -80,12 +86,12 @@
<div class="contetn_lr-item_contetn">
<div class="contetn_lr-item_left">
<ItemWrap class="contetn_left-top contetn_lr-item" title="浜鸿溅璺熀纭�淇℃伅">
- <left-center/>
+ <left-center />
</ItemWrap>
</div>
<div class="contetn_lr-item_right">
<ItemWrap class="contetn_left-top contetn_lr-item" title="閲嶇偣鏅尯杩愯鎯呭喌">
- <left-bottom/>
+ <left-bottom />
</ItemWrap>
</div>
@@ -96,8 +102,25 @@
<CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�" />
</div>
- <div style="display:flex;">
+
+ <!-- 鍙宠竟鍖哄煙 -->
+ <div class="contetn_right flex flex-col">
<div>
+ <Analysis />
+ </div>
+ <div class="flex justify-between">
+ <div class="right_wrapper_content">
+ <Danger />
+ </div>
+ <div class="right_wrapper_content">
+ <Publicize />
+ </div>
+ </div>
+ </div>
+
+
+ <!-- 缂夋瘨鍘熺増 -->
+ <!-- <div>
<div style="height: 50%;">
<div style="display: flex;justify-content: space-between">
@@ -175,6 +198,7 @@
</div
>
</div>
+
<div style="height: 50%">
<div style="display: flex;justify-content: space-between">
@@ -213,8 +237,8 @@
</div
>
</div>
- </div>
- </div>
+ </div> -->
+ <!-- 缂夋瘨鍘熺増 -->
</div>
</template>
@@ -225,6 +249,7 @@
min-height: calc(100% - 64px);
justify-content: space-between;
}
+
//宸﹁竟 鍙宠竟 缁撴瀯涓�鏍�
.contetn_left,
.contetn_right {
@@ -236,12 +261,14 @@
box-sizing: border-box;
flex-shrink: 0;
}
+
.contetn_center {
flex: 1;
margin: 0 54px;
display: flex;
flex-direction: column;
justify-content: space-around;
+
.contetn_center-bottom {
height: 315px;
}
@@ -250,16 +277,20 @@
.contetn_lr-item {
height: 310px;
}
-.contetn_lr-item_right{
+
+.contetn_lr-item_right {
flex: auto;
}
-.contetn_lr-item_left{
+
+.contetn_lr-item_left {
flex: 1;
}
-.contetn_lr-item_contetn{
+
+.contetn_lr-item_contetn {
display: flex;
}
-.contetn_left-center_item_center{
+
+.contetn_left-center_item_center {
padding: 1rem 0.5rem;
margin-top: 5px;
@@ -268,9 +299,11 @@
height: 75px;
background-color: #172451;
}
-.header{
+
+.header {
background-color: #121E44;
}
+
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);
@@ -296,21 +329,20 @@
.you {
transform: rotate(180deg);
}
+
.title-inner {
font-weight: 900;
letter-spacing: 2px;
- background: linear-gradient(
- 92deg,
- #0072ff 0%,
- #00eaff 48.8525390625%,
- #01aaff 100%
- );
+ background: linear-gradient(92deg,
+ #0072ff 0%,
+ #00eaff 48.8525390625%,
+ #01aaff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
-:deep(.dv-border-box-content) {
+:deep(.dv-border-box-content) {
box-sizing: border-box;
padding: 6px 16px 0px;
}
@@ -324,7 +356,8 @@
width: 100%;
height: 100%;
}
-.right-right-zg{
+
+.right-right-zg {
background-color: #172451;
width: 120px;
display: flex;
@@ -333,4 +366,8 @@
justify-content: center;
padding: 20px 0;
}
+
+.right_wrapper_content {
+ width: 617px;
+}
</style>
diff --git a/src/views/daoAnOffice/right/analysis/index.vue b/src/views/daoAnOffice/right/analysis/index.vue
new file mode 100644
index 0000000..394c160
--- /dev/null
+++ b/src/views/daoAnOffice/right/analysis/index.vue
@@ -0,0 +1,44 @@
+<!-- 浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋� -->
+<template>
+ <RightTitle title="浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋�">
+ <template #top>
+ <div class="select-container flex">
+ <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
+ {{ item.name }}
+ </div>
+ </div>
+ </template>
+ <template #content>
+ <div id="analysisChart"></div>
+ </template>
+ </RightTitle>
+</template>
+
+<script setup>
+import RightTitle from "@/components/right-title";
+import { ref } from 'vue';
+
+const selectItems = ref([
+ { itemIndex: 1, name: '鏃堕棿缁熻', isActive: false },
+ { itemIndex: 2, name: '琛楅亾缁熻', isActive: true },
+]);
+</script>
+
+<style lang="scss" scoped>
+.select-container {
+ flex-shrink: 0;
+}
+
+.item {
+ margin: 0 8px;
+ padding: 10px 14px;
+ font-size: 12px;
+ background: rgba(67, 102, 155, 0.4);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ flex-shrink: 0;
+}
+
+.item:last-child {
+ margin-right: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/right/danger/imageSwiper.vue b/src/views/daoAnOffice/right/danger/imageSwiper.vue
new file mode 100644
index 0000000..29f9ec6
--- /dev/null
+++ b/src/views/daoAnOffice/right/danger/imageSwiper.vue
@@ -0,0 +1,64 @@
+<template>
+ <div class="swiper_button mr-1" @click="prevSwiper">
+ <img :src="leftIcon" class="">
+ </div>
+ <Swiper :slides-per-view="3" :space-between="18" class="image_swiper" @swiper="setSwiper">
+ <SwiperSlide v-for="(slide, index) in imageList" :key="index" class="image_slide">
+ <img :src="slide" class="item_img">
+ </SwiperSlide>
+ </Swiper>
+
+ <div class="swiper_button ml-1" @click="nextSwiper">
+ <img :src="rightIcon">
+ </div>
+</template>
+
+<script setup>
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import leftIcon from '@/assets/img/icon/arrow_left.png';
+import rightIcon from '@/assets/img/icon/arrow_right.png';
+
+import { defineProps,ref } from 'vue';
+
+const swiperRef = ref(null);
+const props = defineProps({
+ imageList: {
+ type: Array,
+ required: true
+ }
+})
+const setSwiper = (swiper) => {
+ swiperRef.value = swiper;
+}
+ const prevSwiper = () => {
+ swiperRef.value.slidePrev();
+ }
+
+ const nextSwiper = () => {
+ swiperRef.value.slideNext();
+ }
+
+</script>
+
+<style lang="scss" scoped>
+.image_swiper {
+ width: 380px;
+}
+
+.swiper-slide.image_slide {
+ width: 102px;
+ height: 124px;
+ overflow: hidden;
+}
+
+.item_img {
+ display: block;
+ height: 100%;
+ object-fit: fill;
+}
+
+.swiper_button {
+ cursor: pointer;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/right/danger/index.vue b/src/views/daoAnOffice/right/danger/index.vue
new file mode 100644
index 0000000..0acfb49
--- /dev/null
+++ b/src/views/daoAnOffice/right/danger/index.vue
@@ -0,0 +1,151 @@
+<!-- 瀹夊叏闅愭偅鎯呭喌 -->
+
+<template>
+ <RightTitle title="瀹夊叏闅愭偅鎯呭喌">
+ <template #top>
+ <div class="select-container flex">
+ <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
+ {{ item.name }}
+ </div>
+ </div>
+ </template>
+ <template #content>
+ <div class="content-container flex flex-col justify-between">
+ <div class="content-item" v-for="item in contentList" :key="item.itemIndex">
+ <div class="content-wrapper flex justify-between">
+
+ <!-- 淇℃伅闈㈡澘 -->
+ <div class="info-content flex flex-col justify-between">
+ <div class="info-item">
+ <span class="info-label">閫氭嫨鏃堕棶锛�</span>
+ <span class="info-value">{{ item.time }}</span>
+ </div>
+ <div class="info-item">
+ <span class="info-label">闅愭偅绫诲瀷锛�</span>
+ <span class="info-value">{{ item.type }}</span>
+ </div>
+ <div class="info-item">
+ <span class="info-label">璐ｄ换鍗曚綅锛�</span>
+ <span class="info-value">{{ item.unit }}</span>
+ </div>
+ <div class="info-item">
+ <span class="info-label">閯傛敼鏃堕檺锛�</span>
+ <span class="info-value">{{ item.rectTime }}</span>
+ </div>
+ <div class="info-item">
+ <span class="info-label">瀹屾垚鎯呭喌锛�</span>
+ <span class="info-value">{{ item.state }}</span>
+ </div>
+ </div>
+
+ <!-- 鍥剧墖鍒楄〃 -->
+ <div class="image-content flex justify-between items-center">
+ <ImageSwiper :imageList="item.images"></ImageSwiper>
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </RightTitle>
+</template>
+
+<script setup lang="ts">
+import testImage from '@/assets/img/test_img/閬撳畨鍔�.png';
+
+import RightTitle from "@/components/right-title";
+import ImageSwiper from './imageSwiper.vue';
+import { ref } from 'vue';
+
+
+const selectItems = ref([
+ { itemIndex: 1, name: '瀹夊叏闅愭偅', isActive: false },
+ { itemIndex: 2, name: '鏁版嵁缁熻', isActive: true },
+]);
+
+const contentList = ref([
+ {
+ itemIndex: 1,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ images: [
+ testImage,
+ testImage,
+ testImage,
+ testImage,
+ testImage,
+ ]
+ },
+ {
+ itemIndex: 2,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ images: [
+ testImage,
+ testImage,
+ testImage,
+ testImage,
+ testImage,
+ ]
+ },
+ {
+ itemIndex: 3,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ images: [
+ testImage,
+ testImage,
+ testImage,
+ testImage,
+ testImage,
+ ]
+ }
+]);
+
+</script>
+
+<style scoped lang="scss">
+.select-container {
+ flex-shrink: 0;
+}
+
+.item {
+ margin: 0 8px;
+ padding: 10px 14px;
+ font-size: 12px;
+ background: rgba(67, 102, 155, 0.4);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ flex-shrink: 0;
+}
+
+.item:last-child {
+ margin-right: 0;
+}
+.content-container {
+ height: 560px;
+}
+.content-item {
+ background-color: rgba(17, 34, 58, 0.6);
+ padding: 23px 7px 23px 23px;
+ border: 1px solid #29466A;
+}
+.content-item:last-child {
+ margin-bottom: 0px;
+}
+
+.info-item {
+ font-size: 12px;
+
+ .info-label {
+ color: rgba(91, 131, 189, 1);
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/right/publicize/index.vue b/src/views/daoAnOffice/right/publicize/index.vue
new file mode 100644
index 0000000..b2c56b4
--- /dev/null
+++ b/src/views/daoAnOffice/right/publicize/index.vue
@@ -0,0 +1,153 @@
+<!-- 浜ら�氬浼� -->
+
+
+<template>
+ <RightTitle title="浜ら�氬浼�">
+ <template #top>
+ <div class="select-container flex">
+ <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
+ {{ item.name }}
+ </div>
+ </div>
+ </template>
+ <template #content>
+ <div class="content-container flex flex-wrap justify-between content-between">
+ <div class="content-item" v-for="item in contentList" :key="item.itemIndex">
+ <div class="content-wrapper">
+ <div class="content-video-info">
+ <img :src="item.image" class="video-cover">
+ <div class="video-icon">
+ <el-icon>
+ <VideoPlay />
+ </el-icon>
+ </div>
+ </div>
+ <div class="content-video-name">
+ {{ item.unit }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </RightTitle>
+</template>
+
+<script setup lang="ts">
+import testImage from '@/assets/img/test_img/閬撳畨鍔�.png';
+
+import RightTitle from "@/components/right-title";
+import { ref } from 'vue';
+
+
+const selectItems = ref([
+ { itemIndex: 1, name: '浜ら�氬浼�', isActive: false },
+ { itemIndex: 2, name: '浜ら�氫簨鏁�', isActive: true },
+]);
+
+const contentList = ref([
+ {
+ itemIndex: 1,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ image: testImage
+ },
+ {
+ itemIndex: 2,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ image: testImage
+ },
+ {
+ itemIndex: 3,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ image: testImage
+ },
+ {
+ itemIndex: 4,
+ time: '2023 12-12',
+ type: '閬撹矾闅愭偅',
+ unit: '閮芥睙鍫板競鍏畨灞�',
+ rectTime: '2023-13-23',
+ state: '鎶慨涓�',
+ image: testImage
+ },
+]);
+
+</script>
+
+<style scoped lang="scss">
+.select-container {
+ flex-shrink: 0;
+}
+
+.item {
+ margin: 0 8px;
+ padding: 10px 14px;
+ font-size: 12px;
+ background: rgba(67, 102, 155, 0.4);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ flex-shrink: 0;
+}
+
+.item:last-child {
+ margin-right: 0;
+}
+
+.content-container {
+ width: 100%;
+ height: 560px;
+ overflow-y: hidden;
+ background-color: rgba(17, 34, 58, 0.6);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ padding: 22px 20px;
+
+}
+
+.content-item {
+ width: 279px;
+ flex-shrink: 0;
+ cursor: pointer;
+ // margin-bottom: 24px;
+}
+// .content-item:last-child {
+// margin-bottom: 0px;
+// }
+
+.content-video-info {
+ width: 100%;
+ height: 209px;
+ position: relative;
+}
+
+.video-icon {
+ width: 45px;
+ height: 45px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 45px;
+ opacity: 0.7;
+}
+.video-cover {
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
+}
+.content-video-name {
+ text-align: center;
+ margin-top: 16px;
+ font-size: 12px;
+ color: rgba(91, 131, 189, 1);
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0