Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
6cc72151 by zrj
Options

10.21 lpt 修改图标和图片预览功能

1 parent 8426455c
Inline Side-by-side
Showing 14 changed files with 248 additions and 76 deletions
public/bitbug_favicon.ico
No preview for this file type
src/assets/pc/logo.png
src/assets/pc/logo.png

9.18 KB | W: | H:

src/assets/pc/logo.png

12.8 KB | W: | H:

src/assets/pc/logo.png
src/assets/pc/logo.png
src/assets/pc/logo.png
src/assets/pc/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/layoutPc/components/AppBottom.vue
<template>
<div class="footAll">
<div class="box" style="max-width: 90%">
<el-row align="middle" justify="space-between">
<el-col :span="18">
<div class="imgFlex">
<div style="text-align: center;margin-right: 50px">
<img @click="goUrl('https://www.facebook.com/share/1BDtH7xYaS/?mibextid=wwXIfr')" class="link-img" alt="" src="@/assets/images/bottom01.svg">
<img @click="goUrl('https://www.instagram.com/lpt__official/')" class="link-img" alt="" src="@/assets/images/bottom02.svg">
<!-- <img class="link-img" alt="" src="@/assets/images/bottom03.svg">-->
<img @click="goUrl('https://www.youtube.com/channel/UCNFV48KiGZLYcf8NQocM-iQ')" class="link-img" alt="" src="@/assets/images/bottom05.svg">
<img @click="goUrl('https://www.tiktok.com/@lpt.official')" class="link-img" alt="" src="@/assets/images/bottom06.svg">
</div>
<div class="text-center copyright pd10">{{ languageLibrary[language].a }}
<!-- <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a>-->
</div>
</div>
<div class="box" style="width: 80%">
<el-row align="middle" justify="space-between">
<el-col :span="24" style="display:flex; justify-content: center">
<img style="width: 364pt;height: auto" alt="" src="@/assets/pc/logoBottom.png">
</el-col>
</el-row>
<el-row style="margin-top: 20px" align="middle" justify="space-between">
<el-col :span="24" style="display:flex; justify-content: center">
<img @click="goUrl('https://www.facebook.com/share/1BDtH7xYaS/?mibextid=wwXIfr')" class="link-img" alt=""
src="@/assets/images/bottom01.svg">
<img @click="goUrl('https://www.instagram.com/lpt__official/')" class="link-img" alt=""
src="@/assets/images/bottom02.svg">
<!-- <img class="link-img" alt="" src="@/assets/images/bottom03.svg">-->
<img @click="goUrl('https://www.youtube.com/channel/UCNFV48KiGZLYcf8NQocM-iQ')" class="link-img" alt=""
src="@/assets/images/bottom05.svg">
<img @click="goUrl('https://www.tiktok.com/@lpt.official')" class="link-img" alt=""
src="@/assets/images/bottom06.svg">
</el-col>
<el-col :span="6">
<div>
<img alt="" src="@/assets/pc/logo.png">
</el-row>
<el-divider class="foot-divider"></el-divider>
<el-row align="middle" justify="space-between">
<el-col :span="24" style="display:flex; justify-content: center">
<div class="text-center copyright pd10">{{ languageLibrary[language].a }}
<!-- <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a>-->
</div>
</el-col>
</el-row>
......@@ -34,15 +39,15 @@ import {ElMessage} from "element-plus";
const router = useRouter()
const language = useStorage('language', 1)
const languageLibrary = [{
a:'版权所有@ LONG POKER INC. ALL RIGHT RESERVED',
},{
a:'COPYRIGHT @ LONG POKER INC. ALL RIGHT RESERVED',
},{
a:'저작권 @ LONG POKER INC. All Rights Reserved.',
},{
a:'著作権 © LONG POKER INC. All Rights Reserved.',
},{
a:'Bản quyền thuộc về @ LONG POKER INC.-Giữ toàn bản quyền.',
a: '版权所有@ LONG POKER INC. ALL RIGHT RESERVED',
}, {
a: 'COPYRIGHT @ LONG POKER INC. ALL RIGHT RESERVED',
}, {
a: '저작권 @ LONG POKER INC. All Rights Reserved.',
}, {
a: '著作権 © LONG POKER INC. All Rights Reserved.',
}, {
a: 'Bản quyền thuộc về @ LONG POKER INC.-Giữ toàn bản quyền.',
}]
const goHelp = () => {
......@@ -86,7 +91,7 @@ const goUrl = (url) => {
right: 0;
top: 65%;
z-index: 9;
.mlb {
background: #fff;
border-radius: 10px 0 0 10px;
......@@ -94,16 +99,16 @@ const goUrl = (url) => {
padding: 10px 8px;
text-align: center;
cursor: pointer;
div {
text-transform: uppercase;
}
div:first-child {
border-bottom: 0.5px solid #eee;
//padding: 0 0 10px;margin-bottom: 10px;
}
div:hover {
.gradient-text {
font-weight: bold;
......@@ -115,7 +120,7 @@ const goUrl = (url) => {
.footAll {
//background: #E0E3E5;
background: #1f2644;
background: #161d39;
padding: 36px 0 5px;
p {
......@@ -123,26 +128,26 @@ const goUrl = (url) => {
opacity: 0.88;
color: #4C5359;
}
ul {
list-style: none;
li {
line-height: 30px;
font-size: 14px;
opacity: 1;
color: #fff;
a {
margin-left: 15px;
&:hover {
text-decoration: underline;
}
}
}
}
img {
height: 60px;
margin-bottom: 20px;
......@@ -163,6 +168,7 @@ const goUrl = (url) => {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.link-img {
width: 40px;
height: 40px !important;
......@@ -170,35 +176,37 @@ const goUrl = (url) => {
margin-right: 20px;
display: inline-block;
}
.imgFlex {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 500px) {
.forWei {
display: none;
}
.footAll {
padding: 10px 0;
ul {
li {
font-size: 10px;
line-height: 1.4;
}
}
img {
height: 36px;
margin-bottom: 0;
}
p {
font-size: 10px;
line-height: 1.4;
}
.copyright {
font-size: 10px;
line-height: 1.4;
......@@ -212,7 +220,7 @@ const goUrl = (url) => {
.ffoot {
display: inline-flex;
img {
width: 20px;
height: 20px;
......@@ -222,4 +230,10 @@ const goUrl = (url) => {
margin-right: 4px;
}
}
.foot-divider {
background: linear-gradient(90deg, #F0E1A5, #DEC172);
height: 2px; /* 设置高度 */
margin: 50px 0; /* 设置上下边距 */
}
</style>
......
src/viewsPc/contest/detail.vue
......@@ -4,8 +4,8 @@
<el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
<el-row class="detail-title">
<el-col :span="4">
<span v-if="projectMainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].o }}</span>
<span v-else-if="projectMainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].p }}</span>
<span v-if="projectMainInfo.status == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].o }}</span>
<span v-else-if="projectMainInfo.status == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].p }}</span>
<span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].q }}</span>
</el-col>
<el-col :span="8">
......
src/viewsPc/contest/index.vue
......@@ -40,8 +40,8 @@
<div class="centerbox">
<div class="centerText">
<span style="font-size: 16px;">
<div v-if="n.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].b }}</div>
<div v-else-if="n.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].c }}</div>
<div v-if="n.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].b }}</div>
<div v-else-if="n.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].c }}</div>
<div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].d }}</div>
</span>
<span style="font-size: 26px">{{ n.cptName }}</span>
......
src/viewsPc/contest/list.vue
......@@ -6,8 +6,8 @@
<img class="list-title" :src="fillImgUrl(mainInfo.bgImgUrl)">
<div style="position: absolute;color: #fff;top:15%;left:5%;width: 100%">
<el-row class="mg-bottom" style="font-size: 16px;">
<div v-if="mainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
<div v-else-if="mainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
<div v-if="mainInfo.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
<div v-else-if="mainInfo.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
<div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
</el-row>
<el-row class="mg-bottom" style="font-size: 38px;"><span>{{mainInfo.name}}</span></el-row>
......@@ -34,8 +34,8 @@
<div class="child-card">
<el-button class="go-btn" @click="goDetail(item.id)"></el-button>
<el-row style="margin-bottom: 10px">
<div v-if="item.statusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
<div v-else-if="item.statusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
<div v-if="item.status == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
<div v-else-if="item.status == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
<div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
</el-row>
<el-row style="margin-bottom: 10px; font-weight: bold;font-size: 20px">{{item.name}}</el-row>
......
src/viewsPc/index.vue
......@@ -42,8 +42,8 @@
<div class="centerbox">
<div class="centerText">
<span style="font-size: 16px;">
<div v-if="n.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
<div v-else-if="n.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
<div v-if="n.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
<div v-else-if="n.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
<div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
</span>
<span style="font-size: 26px">{{n.cptName}}</span>
......@@ -104,12 +104,12 @@
</div>
<el-row :gutter="20">
<el-col
v-for="(n,index) in instagramList.slice(0,6)" :lg="6" :sm="6"
v-for="(n,index) in instagramList.slice(0,8)" :lg="6" :sm="6"
:xs="24" style="margin-bottom: 10px"
>
<div class="activeItem">
<div class="imgbox">
<img :src="fillImgUrl(n.picUrl)">
<img @click="openImage(index)" :src="fillImgUrl(n.picUrl)">
</div>
</div>
</el-col>
......@@ -159,6 +159,12 @@
</el-card>
</div>
</div>
<el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
<el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
<el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
<img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script setup>
......@@ -174,6 +180,7 @@ import * as match from "@/apiPc/match";
const router = useRouter()
const {proxy} = getCurrentInstance()
const emit = defineEmits(['pop', 'pickup', 'backNumber', 'schSearch'])
import { fillImgUrl } from '@/utils/ruoyi'
const newest2 = ref([])
const instagramList = ref([])
const news = ref([])
......@@ -262,8 +269,8 @@ onMounted(() => {
const init = () => {
match.getMaList({}).then((res) => {
newest2.value = res.rows.map(({languageSourceStr,coverUrl,cptName,beginTime,
endTime,address,enrollStatusStr,id,signKnow}) =>
({languageSourceStr,coverUrl,cptName,beginTime,endTime,address,enrollStatusStr,id,signKnow}))
endTime,address,enrollStatus,id,signKnow}) =>
({languageSourceStr,coverUrl,cptName,beginTime,endTime,address,enrollStatus,id,signKnow}))
})
match.getNoteList(lunboParams.value).then(res => {
......@@ -346,9 +353,42 @@ const getTimeFormate = (time) => {
return `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
}
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const imageIndex = ref(0)
const openImage = function (index) {
imageIndex.value = index
dialogImageUrl.value = fillImgUrl(instagramList.value[index].picUrl)
dialogVisible.value = true
}
const preImage = function () {
if (imageIndex.value >= 1) {
imageIndex.value -= 1
}
dialogImageUrl.value = fillImgUrl(instagramList.value[imageIndex.value].picUrl)
}
const nextImage = function (url) {
if (imageIndex.value < (instagramList.value.length - 1)) {
imageIndex.value += 1
}
dialogImageUrl.value = fillImgUrl(instagramList.value[imageIndex.value].picUrl)
}
</script>
<style lang="scss" scoped>
.preview-button {
background: transparent;
border: none;
width: auto;
height: auto;
position: absolute;
top: 50%;
}
.syBg {
margin: 0 10%;
}
......
src/viewsPc/instagram/index.vue
......@@ -7,12 +7,18 @@
</el-col>
</el-row>
<el-row>
<el-col class="photo-space" :lg="8" v-for="item in itemList">
<el-col class="photo-space" :lg="8" v-for="(item, index) in itemList">
<div class="photo-img-group">
<img class="photo-img" :src="fillImgUrl(item.picUrl)">
<img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.picUrl)">
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
<el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
<el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
<img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</div>
</template>
......@@ -22,6 +28,7 @@ import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
import * as match from "@/apiPc/match";
import { fillImgUrl } from '@/utils/ruoyi'
const language = useStorage('language', 1)
const languageLibrary = [{
......@@ -54,8 +61,39 @@ const getList = () => {
})
}
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const imageIndex = ref(0)
const openImage = function (index) {
imageIndex.value = index
dialogImageUrl.value = fillImgUrl(itemList.value[index].picUrl)
dialogVisible.value = true
}
const preImage = function () {
if (imageIndex.value >= 1) {
imageIndex.value -= 1
}
dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
}
const nextImage = function (url) {
if (imageIndex.value < (itemList.value.length - 1)) {
imageIndex.value += 1
}
dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
}
</script>
<style lang="scss" scoped>
.preview-button {
background: transparent;
border: none;
width: auto;
height: auto;
position: absolute;
top: 50%;
}
.photo-pagination {
justify-content: center;
margin: 10px;
......
src/viewsPc/mall/index.vue
......@@ -7,13 +7,19 @@
</el-col>
</el-row>
<el-row>
<el-col class="photo-space" :lg="8" v-for="item in itemList">
<el-col class="photo-space" :lg="8" v-for="(item, index) in itemList">
<div class="photo-img-group">
<img class="photo-img" :src="fillImgUrl(item.picUrl)">
<img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.picUrl)">
<span style="display: block;font-size: 16px;margin:5px 0;color:#fff">{{item.text}}</span>
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
<el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
<el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
<img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</div>
</template>
......@@ -24,6 +30,7 @@ import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
import * as match from "@/apiPc/match";
import { fillImgUrl } from '@/utils/ruoyi'
const language = useStorage('language', 1)
const languageLibrary = ref([{
......@@ -61,8 +68,41 @@ const goDetail = (id) => {
path: `/photo/detail/${id}`
})
}
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const imageIndex = ref(0)
const openImage = function (index) {
imageIndex.value = index
dialogImageUrl.value = fillImgUrl(itemList.value[index].picUrl)
dialogVisible.value = true
}
const preImage = function () {
if (imageIndex.value >= 1) {
imageIndex.value -= 1
}
dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
}
const nextImage = function () {
if (imageIndex.value < (itemList.value.length - 1)) {
imageIndex.value += 1
}
dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
}
</script>
<style lang="scss" scoped>
.preview-button {
background: transparent;
border: none;
width: auto;
height: auto;
position: absolute;
top: 50%;
}
.photo-space {
padding: 10px;
}
......
src/viewsPc/news/detail.vue
<template>
<div>
<div class="box">
<el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
<!-- <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>-->
<el-card class="mt20 mb20 news-card">
<div class="bpd">
<h3 class="title">{{form.name}}</h3>
......
src/viewsPc/news/index.vue
......@@ -30,7 +30,7 @@
<div class="item-body">
<el-row>
<el-col :span="8">
<img style="aspect-ratio: 2/1;width: 100%;padding: 10px" :src="fillImgUrl(n.picUrl)">
<img style="width: 100%;padding: 10px" :src="fillImgUrl(n.picUrl)">
</el-col>
<el-col :span="16">
<h3 >{{n.name}}</h3>
......@@ -53,7 +53,7 @@
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import {nextTick, onMounted, ref} from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
......@@ -132,9 +132,11 @@ const getMoreList = ()=> {
}
const goDetail = (id) => {
router.push({
localStorage.setItem('scrollPosition', JSON.stringify({ x: window.pageXOffset, y: window.pageYOffset }))
const url = router.resolve({
path: `/news/detail/${id}`
})
window.open(url.href, '_blank')
}
</script>
<style lang="scss" scoped>
......
src/viewsPc/photo/detail.vue
......@@ -4,8 +4,8 @@
<el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
<el-row class="detail-title">
<el-col :span="4">
<span v-if="projectMainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</span>
<span v-else-if="projectMainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</span>
<span v-if="projectMainInfo.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</span>
<span v-else-if="projectMainInfo.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</span>
<span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</span>
</el-col>
<el-col :span="6">
......@@ -34,12 +34,18 @@
</el-row>
<el-row>
<el-col class="photo-space" :lg="12" v-for="item in photoList">
<el-col class="photo-space" :lg="12" v-for="(item, index) in photoList">
<div class="photo-img-group">
<img class="photo-img" :src="fillImgUrl(item.path)">
<img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.path)">
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
<el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
<el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
<img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</div>
</template>
......@@ -48,6 +54,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core";
import {getMain,getImgList} from '@/apiPc/webSite'
import { fillImgUrl } from '@/utils/ruoyi'
const router = useRouter()
const route = useRoute()
......@@ -118,12 +125,44 @@ const getPhotoList = () => {
})
}
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const imageIndex = ref(0)
const openImage = function (index) {
imageIndex.value = index
dialogImageUrl.value = fillImgUrl(photoList.value[index].path)
dialogVisible.value = true
}
const preImage = function () {
if (imageIndex.value >= 1) {
imageIndex.value -= 1
}
dialogImageUrl.value = fillImgUrl(photoList.value[imageIndex.value].path)
}
const nextImage = function (url) {
if (imageIndex.value < (photoList.value.length - 1)) {
imageIndex.value += 1
}
dialogImageUrl.value = fillImgUrl(photoList.value[imageIndex.value].path)
}
const goback = function () {
router.go(-1)
}
</script>
<style lang="scss" scoped>
.preview-button {
background: transparent;
border: none;
width: auto;
height: auto;
position: absolute;
top: 50%;
}
.box {
padding: 0 10%;
}
......@@ -166,7 +205,6 @@ const goback = function () {
.photo-img {
width: 100%;
aspect-ratio: 3/2;
cursor: pointer;
}
</style>
......
src/viewsPc/photo/list.vue
......@@ -63,14 +63,15 @@ onMounted(() => {
const getList = () => {
match.getTree({
code: tid.value
}).then((res) => {
}).then(async(res) => {
if (res.code === 200) {
matchList.value = []
res.data.forEach(item => {
match.getTreeDetail(item.id).then((res2) => {
matchList.value.push(res2.data)
})
})
console.log(res.data.length)
for (let i=0;i<res.data.length;i++) {
console.log(res.data[i].id)
const matchData = await match.getTreeDetail(res.data[i].id)
matchList.value.push(matchData.data)
}
}
})
}
......@@ -142,7 +143,6 @@ const goback = function () {
.photo-img {
width: 100%;
aspect-ratio: 2/1;
cursor: pointer;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!