flx:修改首页总览的视频配置到后台

This commit is contained in:
Rain_ 2025-03-24 17:43:53 +08:00
parent 2e9bcb40c9
commit ea49de0d6b
2 changed files with 40 additions and 12 deletions

View File

@ -3,14 +3,14 @@
<div class="bottom-left"> <div class="bottom-left">
<el-scrollbar class="list-content"> <el-scrollbar class="list-content">
<div class="list-detail" v-for="item in memberCareList" :key="item.id"> <div class="list-detail" v-for="item in memberCareList" :key="item.id">
<div class="detail-pic"> <!-- <div class="detail-pic">
<el-image <el-image
:preview-src-list="item.file.map((item: any) => item.url)" :preview-src-list="item.file.map((item: any) => item.url)"
v-if="item.file.length > 0" v-if="item.file.length > 0"
:src="item.file[0].url" :src="item.file[0].url"
fit="cover" fit="cover"
/> />
</div> </div> -->
<div class="detail-text"> <div class="detail-text">
<div class="title" :title="item.title">115533{{ item.title || " " }}</div> <div class="title" :title="item.title">115533{{ item.title || " " }}</div>
<div class="time">{{ item.createDate || " " }}</div> <div class="time">{{ item.createDate || " " }}</div>

View File

@ -38,7 +38,7 @@
</el-carousel> </el-carousel>
</div> </div>
<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false"> <div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
<el-upload <!-- <el-upload
:action="BASEURL + '/upload/image'" :action="BASEURL + '/upload/image'"
:on-success="file => handleSuccessTwo(file, 1)" :on-success="file => handleSuccessTwo(file, 1)"
:on-error="file => handleError(file, 1)" :on-error="file => handleError(file, 1)"
@ -46,14 +46,13 @@
name="files" name="files"
:show-file-list="false" :show-file-list="false"
> >
<!-- 更换视频 -->
<span class="change-video" v-if="showChangeVideo">更换视频</span> <span class="change-video" v-if="showChangeVideo">更换视频</span>
</el-upload> </el-upload> -->
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video> <video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
</div> </div>
<div class="imgBox" v-if="showVideo == 3"> <div class="imgBox" v-if="showVideo == 3">
<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false"> <div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
<el-upload <!-- <el-upload
:action="BASEURL + '/upload/image'" :action="BASEURL + '/upload/image'"
:on-success="file => handleSuccess(file, 1)" :on-success="file => handleSuccess(file, 1)"
:on-error="file => handleError(file, 1)" :on-error="file => handleError(file, 1)"
@ -61,10 +60,14 @@
name="files" name="files"
:show-file-list="false" :show-file-list="false"
> >
<!-- 更换图片 -->
<span class="change-video" v-if="showChangeImg">更换图片</span> <span class="change-video" v-if="showChangeImg">更换图片</span>
</el-upload> </el-upload> -->
<img :src="BASEURL + '/image/' + picUrl" alt="" /> <!-- <img :src="BASEURL + '/image/' + picUrl" alt="" /> -->
<el-carousel trigger="click" :interval="5000">
<el-carousel-item v-for="item in picUrl" :key="item.id">
<div class="bg_top" :style="`background-image: url(${item.url})`"></div>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> </div>
</Card> </Card>
@ -72,6 +75,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { isJSON } from "@/utils/util";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
@ -101,12 +105,15 @@ watch(
// console.log(newVal, "newVal"); // console.log(newVal, "newVal");
if (newVal) { if (newVal) {
// props.xData = newVal; // props.xData = newVal;
projectData.value = newVal; projectData.value = {
...newVal,
videoUrl: isJSON(newVal.videoUrl) && JSON.parse(newVal.videoUrl) instanceof Array ? JSON.parse(newVal.videoUrl)[0].url : "",
};
} }
} }
); );
// //
const picUrl = ref("" as any); const picUrl = ref([] as any);
const BASEURL = import.meta.env.VITE_API_URL; const BASEURL = import.meta.env.VITE_API_URL;
// //
@ -270,7 +277,7 @@ function getQueryBySnData(showLoading: boolean) {
}, showLoading).then((res: any) => { }, showLoading).then((res: any) => {
console.log(res, "效果图"); console.log(res, "效果图");
if (res.result) { if (res.result) {
picUrl.value = res.result.configValue; picUrl.value = isJSON(res.result.configValue) && JSON.parse(res.result.configValue) instanceof Array ? JSON.parse(res.result.configValue) : [];
} }
}); });
} }
@ -332,6 +339,27 @@ onMounted(async () => {
height: 100%; height: 100%;
margin-top: 5%; margin-top: 5%;
} }
:deep(.el-carousel) {
height: 430px;
.el-carousel__container {
height: 100%;
}
.el-carousel__indicators--horizontal {
display: none;
}
.el-carousel__arrow {
top: 55%;
}
}
.bg_top {
width: 100%;
height: 100%;
margin-top: 5%;
// background-image: url(~@/assets/images/bthgIcon/bg5.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
} }
} }
.href-content { .href-content {