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
1 <template> 1 <template>
2 <div class="footAll"> 2 <div class="footAll">
3 <div class="box" style="max-width: 90%"> 3 <div class="box" style="width: 80%">
4 <el-row align="middle" justify="space-between"> 4 <el-row align="middle" justify="space-between">
5 <el-col :span="18"> 5 <el-col :span="24" style="display:flex; justify-content: center">
6 <div class="imgFlex"> 6 <img style="width: 364pt;height: auto" alt="" src="@/assets/pc/logoBottom.png">
7 <div style="text-align: center;margin-right: 50px"> 7 </el-col>
8 <img @click="goUrl('https://www.facebook.com/share/1BDtH7xYaS/?mibextid=wwXIfr')" class="link-img" alt="" src="@/assets/images/bottom01.svg"> 8 </el-row>
9 <img @click="goUrl('https://www.instagram.com/lpt__official/')" class="link-img" alt="" src="@/assets/images/bottom02.svg"> 9 <el-row style="margin-top: 20px" align="middle" justify="space-between">
10 <!-- <img class="link-img" alt="" src="@/assets/images/bottom03.svg">--> 10 <el-col :span="24" style="display:flex; justify-content: center">
11 <img @click="goUrl('https://www.youtube.com/channel/UCNFV48KiGZLYcf8NQocM-iQ')" class="link-img" alt="" src="@/assets/images/bottom05.svg"> 11 <img @click="goUrl('https://www.facebook.com/share/1BDtH7xYaS/?mibextid=wwXIfr')" class="link-img" alt=""
12 <img @click="goUrl('https://www.tiktok.com/@lpt.official')" class="link-img" alt="" src="@/assets/images/bottom06.svg"> 12 src="@/assets/images/bottom01.svg">
13 </div> 13 <img @click="goUrl('https://www.instagram.com/lpt__official/')" class="link-img" alt=""
14 <div class="text-center copyright pd10">{{ languageLibrary[language].a }} 14 src="@/assets/images/bottom02.svg">
15 <!-- <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a>--> 15 <!-- <img class="link-img" alt="" src="@/assets/images/bottom03.svg">-->
16 </div> 16 <img @click="goUrl('https://www.youtube.com/channel/UCNFV48KiGZLYcf8NQocM-iQ')" class="link-img" alt=""
17 </div> 17 src="@/assets/images/bottom05.svg">
18 <img @click="goUrl('https://www.tiktok.com/@lpt.official')" class="link-img" alt=""
19 src="@/assets/images/bottom06.svg">
18 </el-col> 20 </el-col>
19 <el-col :span="6"> 21 </el-row>
20 <div> 22 <el-divider class="foot-divider"></el-divider>
21 <img alt="" src="@/assets/pc/logo.png"> 23 <el-row align="middle" justify="space-between">
24 <el-col :span="24" style="display:flex; justify-content: center">
25 <div class="text-center copyright pd10">{{ languageLibrary[language].a }}
26 <!-- <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a>-->
22 </div> 27 </div>
23 </el-col> 28 </el-col>
24 </el-row> 29 </el-row>
...@@ -34,15 +39,15 @@ import {ElMessage} from "element-plus"; ...@@ -34,15 +39,15 @@ import {ElMessage} from "element-plus";
34 const router = useRouter() 39 const router = useRouter()
35 const language = useStorage('language', 1) 40 const language = useStorage('language', 1)
36 const languageLibrary = [{ 41 const languageLibrary = [{
37 a:'版权所有@ LONG POKER INC. ALL RIGHT RESERVED', 42 a: '版权所有@ LONG POKER INC. ALL RIGHT RESERVED',
38 },{ 43 }, {
39 a:'COPYRIGHT @ LONG POKER INC. ALL RIGHT RESERVED', 44 a: 'COPYRIGHT @ LONG POKER INC. ALL RIGHT RESERVED',
40 },{ 45 }, {
41 a:'저작권 @ LONG POKER INC. All Rights Reserved.', 46 a: '저작권 @ LONG POKER INC. All Rights Reserved.',
42 },{ 47 }, {
43 a:'著作権 © LONG POKER INC. All Rights Reserved.', 48 a: '著作権 © LONG POKER INC. All Rights Reserved.',
44 },{ 49 }, {
45 a:'Bản quyền thuộc về @ LONG POKER INC.-Giữ toàn bản quyền.', 50 a: 'Bản quyền thuộc về @ LONG POKER INC.-Giữ toàn bản quyền.',
46 }] 51 }]
47 52
48 const goHelp = () => { 53 const goHelp = () => {
...@@ -86,7 +91,7 @@ const goUrl = (url) => { ...@@ -86,7 +91,7 @@ const goUrl = (url) => {
86 right: 0; 91 right: 0;
87 top: 65%; 92 top: 65%;
88 z-index: 9; 93 z-index: 9;
89 94
90 .mlb { 95 .mlb {
91 background: #fff; 96 background: #fff;
92 border-radius: 10px 0 0 10px; 97 border-radius: 10px 0 0 10px;
...@@ -94,16 +99,16 @@ const goUrl = (url) => { ...@@ -94,16 +99,16 @@ const goUrl = (url) => {
94 padding: 10px 8px; 99 padding: 10px 8px;
95 text-align: center; 100 text-align: center;
96 cursor: pointer; 101 cursor: pointer;
97 102
98 div { 103 div {
99 text-transform: uppercase; 104 text-transform: uppercase;
100 } 105 }
101 106
102 div:first-child { 107 div:first-child {
103 border-bottom: 0.5px solid #eee; 108 border-bottom: 0.5px solid #eee;
104 //padding: 0 0 10px;margin-bottom: 10px; 109 //padding: 0 0 10px;margin-bottom: 10px;
105 } 110 }
106 111
107 div:hover { 112 div:hover {
108 .gradient-text { 113 .gradient-text {
109 font-weight: bold; 114 font-weight: bold;
...@@ -115,7 +120,7 @@ const goUrl = (url) => { ...@@ -115,7 +120,7 @@ const goUrl = (url) => {
115 120
116 .footAll { 121 .footAll {
117 //background: #E0E3E5; 122 //background: #E0E3E5;
118 background: #1f2644; 123 background: #161d39;
119 padding: 36px 0 5px; 124 padding: 36px 0 5px;
120 125
121 p { 126 p {
...@@ -123,26 +128,26 @@ const goUrl = (url) => { ...@@ -123,26 +128,26 @@ const goUrl = (url) => {
123 opacity: 0.88; 128 opacity: 0.88;
124 color: #4C5359; 129 color: #4C5359;
125 } 130 }
126 131
127 ul { 132 ul {
128 list-style: none; 133 list-style: none;
129 134
130 li { 135 li {
131 line-height: 30px; 136 line-height: 30px;
132 font-size: 14px; 137 font-size: 14px;
133 opacity: 1; 138 opacity: 1;
134 color: #fff; 139 color: #fff;
135 140
136 a { 141 a {
137 margin-left: 15px; 142 margin-left: 15px;
138 143
139 &:hover { 144 &:hover {
140 text-decoration: underline; 145 text-decoration: underline;
141 } 146 }
142 } 147 }
143 } 148 }
144 } 149 }
145 150
146 img { 151 img {
147 height: 60px; 152 height: 60px;
148 margin-bottom: 20px; 153 margin-bottom: 20px;
...@@ -163,6 +168,7 @@ const goUrl = (url) => { ...@@ -163,6 +168,7 @@ const goUrl = (url) => {
163 -webkit-background-clip: text; 168 -webkit-background-clip: text;
164 -webkit-text-fill-color: transparent; 169 -webkit-text-fill-color: transparent;
165 } 170 }
171
166 .link-img { 172 .link-img {
167 width: 40px; 173 width: 40px;
168 height: 40px !important; 174 height: 40px !important;
...@@ -170,35 +176,37 @@ const goUrl = (url) => { ...@@ -170,35 +176,37 @@ const goUrl = (url) => {
170 margin-right: 20px; 176 margin-right: 20px;
171 display: inline-block; 177 display: inline-block;
172 } 178 }
179
173 .imgFlex { 180 .imgFlex {
174 display: flex; 181 display: flex;
175 align-items: center; 182 align-items: center;
176 justify-content: center; 183 justify-content: center;
177 } 184 }
185
178 @media (max-width: 500px) { 186 @media (max-width: 500px) {
179 .forWei { 187 .forWei {
180 display: none; 188 display: none;
181 } 189 }
182 .footAll { 190 .footAll {
183 padding: 10px 0; 191 padding: 10px 0;
184 192
185 ul { 193 ul {
186 li { 194 li {
187 font-size: 10px; 195 font-size: 10px;
188 line-height: 1.4; 196 line-height: 1.4;
189 } 197 }
190 } 198 }
191 199
192 img { 200 img {
193 height: 36px; 201 height: 36px;
194 margin-bottom: 0; 202 margin-bottom: 0;
195 } 203 }
196 204
197 p { 205 p {
198 font-size: 10px; 206 font-size: 10px;
199 line-height: 1.4; 207 line-height: 1.4;
200 } 208 }
201 209
202 .copyright { 210 .copyright {
203 font-size: 10px; 211 font-size: 10px;
204 line-height: 1.4; 212 line-height: 1.4;
...@@ -212,7 +220,7 @@ const goUrl = (url) => { ...@@ -212,7 +220,7 @@ const goUrl = (url) => {
212 220
213 .ffoot { 221 .ffoot {
214 display: inline-flex; 222 display: inline-flex;
215 223
216 img { 224 img {
217 width: 20px; 225 width: 20px;
218 height: 20px; 226 height: 20px;
...@@ -222,4 +230,10 @@ const goUrl = (url) => { ...@@ -222,4 +230,10 @@ const goUrl = (url) => {
222 margin-right: 4px; 230 margin-right: 4px;
223 } 231 }
224 } 232 }
233
234 .foot-divider {
235 background: linear-gradient(90deg, #F0E1A5, #DEC172);
236 height: 2px; /* 设置高度 */
237 margin: 50px 0; /* 设置上下边距 */
238 }
225 </style> 239 </style>
......
src/viewsPc/contest/detail.vue
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
4 <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button> 4 <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
5 <el-row class="detail-title"> 5 <el-row class="detail-title">
6 <el-col :span="4"> 6 <el-col :span="4">
7 <span v-if="projectMainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].o }}</span> 7 <span v-if="projectMainInfo.status == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].o }}</span>
8 <span v-else-if="projectMainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].p }}</span> 8 <span v-else-if="projectMainInfo.status == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].p }}</span>
9 <span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].q }}</span> 9 <span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].q }}</span>
10 </el-col> 10 </el-col>
11 <el-col :span="8"> 11 <el-col :span="8">
......
src/viewsPc/contest/index.vue
...@@ -40,8 +40,8 @@ ...@@ -40,8 +40,8 @@
40 <div class="centerbox"> 40 <div class="centerbox">
41 <div class="centerText"> 41 <div class="centerText">
42 <span style="font-size: 16px;"> 42 <span style="font-size: 16px;">
43 <div v-if="n.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].b }}</div> 43 <div v-if="n.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].b }}</div>
44 <div v-else-if="n.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].c }}</div> 44 <div v-else-if="n.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].c }}</div>
45 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].d }}</div> 45 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].d }}</div>
46 </span> 46 </span>
47 <span style="font-size: 26px">{{ n.cptName }}</span> 47 <span style="font-size: 26px">{{ n.cptName }}</span>
......
src/viewsPc/contest/list.vue
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
6 <img class="list-title" :src="fillImgUrl(mainInfo.bgImgUrl)"> 6 <img class="list-title" :src="fillImgUrl(mainInfo.bgImgUrl)">
7 <div style="position: absolute;color: #fff;top:15%;left:5%;width: 100%"> 7 <div style="position: absolute;color: #fff;top:15%;left:5%;width: 100%">
8 <el-row class="mg-bottom" style="font-size: 16px;"> 8 <el-row class="mg-bottom" style="font-size: 16px;">
9 <div v-if="mainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div> 9 <div v-if="mainInfo.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
10 <div v-else-if="mainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div> 10 <div v-else-if="mainInfo.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
11 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div> 11 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
12 </el-row> 12 </el-row>
13 <el-row class="mg-bottom" style="font-size: 38px;"><span>{{mainInfo.name}}</span></el-row> 13 <el-row class="mg-bottom" style="font-size: 38px;"><span>{{mainInfo.name}}</span></el-row>
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
34 <div class="child-card"> 34 <div class="child-card">
35 <el-button class="go-btn" @click="goDetail(item.id)"></el-button> 35 <el-button class="go-btn" @click="goDetail(item.id)"></el-button>
36 <el-row style="margin-bottom: 10px"> 36 <el-row style="margin-bottom: 10px">
37 <div v-if="item.statusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div> 37 <div v-if="item.status == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
38 <div v-else-if="item.statusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div> 38 <div v-else-if="item.status == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
39 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div> 39 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
40 </el-row> 40 </el-row>
41 <el-row style="margin-bottom: 10px; font-weight: bold;font-size: 20px">{{item.name}}</el-row> 41 <el-row style="margin-bottom: 10px; font-weight: bold;font-size: 20px">{{item.name}}</el-row>
......
src/viewsPc/index.vue
...@@ -42,8 +42,8 @@ ...@@ -42,8 +42,8 @@
42 <div class="centerbox"> 42 <div class="centerbox">
43 <div class="centerText"> 43 <div class="centerText">
44 <span style="font-size: 16px;"> 44 <span style="font-size: 16px;">
45 <div v-if="n.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div> 45 <div v-if="n.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</div>
46 <div v-else-if="n.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div> 46 <div v-else-if="n.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</div>
47 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div> 47 <div v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</div>
48 </span> 48 </span>
49 <span style="font-size: 26px">{{n.cptName}}</span> 49 <span style="font-size: 26px">{{n.cptName}}</span>
...@@ -104,12 +104,12 @@ ...@@ -104,12 +104,12 @@
104 </div> 104 </div>
105 <el-row :gutter="20"> 105 <el-row :gutter="20">
106 <el-col 106 <el-col
107 v-for="(n,index) in instagramList.slice(0,6)" :lg="6" :sm="6" 107 v-for="(n,index) in instagramList.slice(0,8)" :lg="6" :sm="6"
108 :xs="24" style="margin-bottom: 10px" 108 :xs="24" style="margin-bottom: 10px"
109 > 109 >
110 <div class="activeItem"> 110 <div class="activeItem">
111 <div class="imgbox"> 111 <div class="imgbox">
112 <img :src="fillImgUrl(n.picUrl)"> 112 <img @click="openImage(index)" :src="fillImgUrl(n.picUrl)">
113 </div> 113 </div>
114 </div> 114 </div>
115 </el-col> 115 </el-col>
...@@ -159,6 +159,12 @@ ...@@ -159,6 +159,12 @@
159 </el-card> 159 </el-card>
160 </div> 160 </div>
161 </div> 161 </div>
162
163 <el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
164 <el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
165 <el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
166 <img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
167 </el-dialog>
162 </div> 168 </div>
163 </template> 169 </template>
164 <script setup> 170 <script setup>
...@@ -174,6 +180,7 @@ import * as match from "@/apiPc/match"; ...@@ -174,6 +180,7 @@ import * as match from "@/apiPc/match";
174 const router = useRouter() 180 const router = useRouter()
175 const {proxy} = getCurrentInstance() 181 const {proxy} = getCurrentInstance()
176 const emit = defineEmits(['pop', 'pickup', 'backNumber', 'schSearch']) 182 const emit = defineEmits(['pop', 'pickup', 'backNumber', 'schSearch'])
183 import { fillImgUrl } from '@/utils/ruoyi'
177 const newest2 = ref([]) 184 const newest2 = ref([])
178 const instagramList = ref([]) 185 const instagramList = ref([])
179 const news = ref([]) 186 const news = ref([])
...@@ -262,8 +269,8 @@ onMounted(() => { ...@@ -262,8 +269,8 @@ onMounted(() => {
262 const init = () => { 269 const init = () => {
263 match.getMaList({}).then((res) => { 270 match.getMaList({}).then((res) => {
264 newest2.value = res.rows.map(({languageSourceStr,coverUrl,cptName,beginTime, 271 newest2.value = res.rows.map(({languageSourceStr,coverUrl,cptName,beginTime,
265 endTime,address,enrollStatusStr,id,signKnow}) => 272 endTime,address,enrollStatus,id,signKnow}) =>
266 ({languageSourceStr,coverUrl,cptName,beginTime,endTime,address,enrollStatusStr,id,signKnow})) 273 ({languageSourceStr,coverUrl,cptName,beginTime,endTime,address,enrollStatus,id,signKnow}))
267 }) 274 })
268 275
269 match.getNoteList(lunboParams.value).then(res => { 276 match.getNoteList(lunboParams.value).then(res => {
...@@ -346,9 +353,42 @@ const getTimeFormate = (time) => { ...@@ -346,9 +353,42 @@ const getTimeFormate = (time) => {
346 353
347 return `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`; 354 return `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
348 } 355 }
356
357 const dialogVisible = ref(false)
358 const dialogImageUrl = ref('')
359 const imageIndex = ref(0)
360 const openImage = function (index) {
361 imageIndex.value = index
362 dialogImageUrl.value = fillImgUrl(instagramList.value[index].picUrl)
363 dialogVisible.value = true
364 }
365
366 const preImage = function () {
367 if (imageIndex.value >= 1) {
368 imageIndex.value -= 1
369 }
370 dialogImageUrl.value = fillImgUrl(instagramList.value[imageIndex.value].picUrl)
371 }
372
373 const nextImage = function (url) {
374 if (imageIndex.value < (instagramList.value.length - 1)) {
375 imageIndex.value += 1
376 }
377 dialogImageUrl.value = fillImgUrl(instagramList.value[imageIndex.value].picUrl)
378 }
379
349 </script> 380 </script>
350 381
351 <style lang="scss" scoped> 382 <style lang="scss" scoped>
383 .preview-button {
384 background: transparent;
385 border: none;
386 width: auto;
387 height: auto;
388 position: absolute;
389 top: 50%;
390 }
391
352 .syBg { 392 .syBg {
353 margin: 0 10%; 393 margin: 0 10%;
354 } 394 }
......
src/viewsPc/instagram/index.vue
...@@ -7,12 +7,18 @@ ...@@ -7,12 +7,18 @@
7 </el-col> 7 </el-col>
8 </el-row> 8 </el-row>
9 <el-row> 9 <el-row>
10 <el-col class="photo-space" :lg="8" v-for="item in itemList"> 10 <el-col class="photo-space" :lg="8" v-for="(item, index) in itemList">
11 <div class="photo-img-group"> 11 <div class="photo-img-group">
12 <img class="photo-img" :src="fillImgUrl(item.picUrl)"> 12 <img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.picUrl)">
13 </div> 13 </div>
14 </el-col> 14 </el-col>
15 </el-row> 15 </el-row>
16
17 <el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
18 <el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
19 <el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
20 <img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
21 </el-dialog>
16 </div> 22 </div>
17 </div> 23 </div>
18 </template> 24 </template>
...@@ -22,6 +28,7 @@ import { onMounted, ref } from 'vue' ...@@ -22,6 +28,7 @@ import { onMounted, ref } from 'vue'
22 import { useRouter } from 'vue-router' 28 import { useRouter } from 'vue-router'
23 import {useStorage} from "@vueuse/core/index"; 29 import {useStorage} from "@vueuse/core/index";
24 import * as match from "@/apiPc/match"; 30 import * as match from "@/apiPc/match";
31 import { fillImgUrl } from '@/utils/ruoyi'
25 32
26 const language = useStorage('language', 1) 33 const language = useStorage('language', 1)
27 const languageLibrary = [{ 34 const languageLibrary = [{
...@@ -54,8 +61,39 @@ const getList = () => { ...@@ -54,8 +61,39 @@ const getList = () => {
54 }) 61 })
55 } 62 }
56 63
64 const dialogVisible = ref(false)
65 const dialogImageUrl = ref('')
66 const imageIndex = ref(0)
67 const openImage = function (index) {
68 imageIndex.value = index
69 dialogImageUrl.value = fillImgUrl(itemList.value[index].picUrl)
70 dialogVisible.value = true
71 }
72
73 const preImage = function () {
74 if (imageIndex.value >= 1) {
75 imageIndex.value -= 1
76 }
77 dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
78 }
79
80 const nextImage = function (url) {
81 if (imageIndex.value < (itemList.value.length - 1)) {
82 imageIndex.value += 1
83 }
84 dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
85 }
57 </script> 86 </script>
58 <style lang="scss" scoped> 87 <style lang="scss" scoped>
88 .preview-button {
89 background: transparent;
90 border: none;
91 width: auto;
92 height: auto;
93 position: absolute;
94 top: 50%;
95 }
96
59 .photo-pagination { 97 .photo-pagination {
60 justify-content: center; 98 justify-content: center;
61 margin: 10px; 99 margin: 10px;
......
src/viewsPc/mall/index.vue
...@@ -7,13 +7,19 @@ ...@@ -7,13 +7,19 @@
7 </el-col> 7 </el-col>
8 </el-row> 8 </el-row>
9 <el-row> 9 <el-row>
10 <el-col class="photo-space" :lg="8" v-for="item in itemList"> 10 <el-col class="photo-space" :lg="8" v-for="(item, index) in itemList">
11 <div class="photo-img-group"> 11 <div class="photo-img-group">
12 <img class="photo-img" :src="fillImgUrl(item.picUrl)"> 12 <img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.picUrl)">
13 <span style="display: block;font-size: 16px;margin:5px 0;color:#fff">{{item.text}}</span> 13 <span style="display: block;font-size: 16px;margin:5px 0;color:#fff">{{item.text}}</span>
14 </div> 14 </div>
15 </el-col> 15 </el-col>
16 </el-row> 16 </el-row>
17
18 <el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
19 <el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
20 <el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
21 <img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
22 </el-dialog>
17 </div> 23 </div>
18 </div> 24 </div>
19 </template> 25 </template>
...@@ -24,6 +30,7 @@ import { getNewsListById } from '@/apiPc/webSite' ...@@ -24,6 +30,7 @@ import { getNewsListById } from '@/apiPc/webSite'
24 import { useRouter } from 'vue-router' 30 import { useRouter } from 'vue-router'
25 import {useStorage} from "@vueuse/core/index"; 31 import {useStorage} from "@vueuse/core/index";
26 import * as match from "@/apiPc/match"; 32 import * as match from "@/apiPc/match";
33 import { fillImgUrl } from '@/utils/ruoyi'
27 34
28 const language = useStorage('language', 1) 35 const language = useStorage('language', 1)
29 const languageLibrary = ref([{ 36 const languageLibrary = ref([{
...@@ -61,8 +68,41 @@ const goDetail = (id) => { ...@@ -61,8 +68,41 @@ const goDetail = (id) => {
61 path: `/photo/detail/${id}` 68 path: `/photo/detail/${id}`
62 }) 69 })
63 } 70 }
71
72 const dialogVisible = ref(false)
73 const dialogImageUrl = ref('')
74 const imageIndex = ref(0)
75 const openImage = function (index) {
76 imageIndex.value = index
77 dialogImageUrl.value = fillImgUrl(itemList.value[index].picUrl)
78 dialogVisible.value = true
79 }
80
81 const preImage = function () {
82 if (imageIndex.value >= 1) {
83 imageIndex.value -= 1
84 }
85 dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
86 }
87
88 const nextImage = function () {
89 if (imageIndex.value < (itemList.value.length - 1)) {
90 imageIndex.value += 1
91 }
92 dialogImageUrl.value = fillImgUrl(itemList.value[imageIndex.value].picUrl)
93 }
94
64 </script> 95 </script>
65 <style lang="scss" scoped> 96 <style lang="scss" scoped>
97 .preview-button {
98 background: transparent;
99 border: none;
100 width: auto;
101 height: auto;
102 position: absolute;
103 top: 50%;
104 }
105
66 .photo-space { 106 .photo-space {
67 padding: 10px; 107 padding: 10px;
68 } 108 }
......
src/viewsPc/news/detail.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="box"> 3 <div class="box">
4 <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button> 4 <!-- <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>-->
5 <el-card class="mt20 mb20 news-card"> 5 <el-card class="mt20 mb20 news-card">
6 <div class="bpd"> 6 <div class="bpd">
7 <h3 class="title">{{form.name}}</h3> 7 <h3 class="title">{{form.name}}</h3>
......
src/viewsPc/news/index.vue
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 <div class="item-body"> 30 <div class="item-body">
31 <el-row> 31 <el-row>
32 <el-col :span="8"> 32 <el-col :span="8">
33 <img style="aspect-ratio: 2/1;width: 100%;padding: 10px" :src="fillImgUrl(n.picUrl)"> 33 <img style="width: 100%;padding: 10px" :src="fillImgUrl(n.picUrl)">
34 </el-col> 34 </el-col>
35 <el-col :span="16"> 35 <el-col :span="16">
36 <h3 >{{n.name}}</h3> 36 <h3 >{{n.name}}</h3>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
53 </template> 53 </template>
54 <script setup> 54 <script setup>
55 import { ArrowRight, Search } from '@element-plus/icons-vue' 55 import { ArrowRight, Search } from '@element-plus/icons-vue'
56 import { onMounted, ref } from 'vue' 56 import {nextTick, onMounted, ref} from 'vue'
57 import { getNewsListById } from '@/apiPc/webSite' 57 import { getNewsListById } from '@/apiPc/webSite'
58 import { useRouter } from 'vue-router' 58 import { useRouter } from 'vue-router'
59 import {useStorage} from "@vueuse/core/index"; 59 import {useStorage} from "@vueuse/core/index";
...@@ -132,9 +132,11 @@ const getMoreList = ()=> { ...@@ -132,9 +132,11 @@ const getMoreList = ()=> {
132 } 132 }
133 133
134 const goDetail = (id) => { 134 const goDetail = (id) => {
135 router.push({ 135 localStorage.setItem('scrollPosition', JSON.stringify({ x: window.pageXOffset, y: window.pageYOffset }))
136 const url = router.resolve({
136 path: `/news/detail/${id}` 137 path: `/news/detail/${id}`
137 }) 138 })
139 window.open(url.href, '_blank')
138 } 140 }
139 </script> 141 </script>
140 <style lang="scss" scoped> 142 <style lang="scss" scoped>
......
src/viewsPc/photo/detail.vue
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
4 <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button> 4 <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
5 <el-row class="detail-title"> 5 <el-row class="detail-title">
6 <el-col :span="4"> 6 <el-col :span="4">
7 <span v-if="projectMainInfo.enrollStatusStr == '未开始'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</span> 7 <span v-if="projectMainInfo.enrollStatus == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].g }}</span>
8 <span v-else-if="projectMainInfo.enrollStatusStr == '进行中'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</span> 8 <span v-else-if="projectMainInfo.enrollStatus == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].h }}</span>
9 <span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</span> 9 <span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].i }}</span>
10 </el-col> 10 </el-col>
11 <el-col :span="6"> 11 <el-col :span="6">
...@@ -34,12 +34,18 @@ ...@@ -34,12 +34,18 @@
34 </el-row> 34 </el-row>
35 35
36 <el-row> 36 <el-row>
37 <el-col class="photo-space" :lg="12" v-for="item in photoList"> 37 <el-col class="photo-space" :lg="12" v-for="(item, index) in photoList">
38 <div class="photo-img-group"> 38 <div class="photo-img-group">
39 <img class="photo-img" :src="fillImgUrl(item.path)"> 39 <img class="photo-img" @click="openImage(index)" :src="fillImgUrl(item.path)">
40 </div> 40 </div>
41 </el-col> 41 </el-col>
42 </el-row> 42 </el-row>
43
44 <el-dialog v-model="dialogVisible" style="background: transparent" width="100%">
45 <el-button @click="preImage" class="preview-button" style="left: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowLeftBold /></el-icon></el-button>
46 <el-button @click="nextImage" class="preview-button" style="right: 20px"><el-icon style="color: #fff;font-size: 50px"><ArrowRightBold /></el-icon></el-button>
47 <img style="width: 80%;margin: 20px auto" :src="dialogImageUrl" alt="" />
48 </el-dialog>
43 </div> 49 </div>
44 </div> 50 </div>
45 </template> 51 </template>
...@@ -48,6 +54,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue' ...@@ -48,6 +54,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
48 import { useRoute, useRouter } from 'vue-router' 54 import { useRoute, useRouter } from 'vue-router'
49 import {useStorage} from "@vueuse/core"; 55 import {useStorage} from "@vueuse/core";
50 import {getMain,getImgList} from '@/apiPc/webSite' 56 import {getMain,getImgList} from '@/apiPc/webSite'
57 import { fillImgUrl } from '@/utils/ruoyi'
51 58
52 const router = useRouter() 59 const router = useRouter()
53 const route = useRoute() 60 const route = useRoute()
...@@ -118,12 +125,44 @@ const getPhotoList = () => { ...@@ -118,12 +125,44 @@ const getPhotoList = () => {
118 }) 125 })
119 } 126 }
120 127
128 const dialogVisible = ref(false)
129 const dialogImageUrl = ref('')
130 const imageIndex = ref(0)
131 const openImage = function (index) {
132 imageIndex.value = index
133 dialogImageUrl.value = fillImgUrl(photoList.value[index].path)
134 dialogVisible.value = true
135 }
136
137 const preImage = function () {
138 if (imageIndex.value >= 1) {
139 imageIndex.value -= 1
140 }
141 dialogImageUrl.value = fillImgUrl(photoList.value[imageIndex.value].path)
142 }
143
144 const nextImage = function (url) {
145 if (imageIndex.value < (photoList.value.length - 1)) {
146 imageIndex.value += 1
147 }
148 dialogImageUrl.value = fillImgUrl(photoList.value[imageIndex.value].path)
149 }
150
121 const goback = function () { 151 const goback = function () {
122 router.go(-1) 152 router.go(-1)
123 } 153 }
124 154
125 </script> 155 </script>
126 <style lang="scss" scoped> 156 <style lang="scss" scoped>
157 .preview-button {
158 background: transparent;
159 border: none;
160 width: auto;
161 height: auto;
162 position: absolute;
163 top: 50%;
164 }
165
127 .box { 166 .box {
128 padding: 0 10%; 167 padding: 0 10%;
129 } 168 }
...@@ -166,7 +205,6 @@ const goback = function () { ...@@ -166,7 +205,6 @@ const goback = function () {
166 205
167 .photo-img { 206 .photo-img {
168 width: 100%; 207 width: 100%;
169 aspect-ratio: 3/2;
170 cursor: pointer; 208 cursor: pointer;
171 } 209 }
172 </style> 210 </style>
......
src/viewsPc/photo/list.vue
...@@ -63,14 +63,15 @@ onMounted(() => { ...@@ -63,14 +63,15 @@ onMounted(() => {
63 const getList = () => { 63 const getList = () => {
64 match.getTree({ 64 match.getTree({
65 code: tid.value 65 code: tid.value
66 }).then((res) => { 66 }).then(async(res) => {
67 if (res.code === 200) { 67 if (res.code === 200) {
68 matchList.value = [] 68 matchList.value = []
69 res.data.forEach(item => { 69 console.log(res.data.length)
70 match.getTreeDetail(item.id).then((res2) => { 70 for (let i=0;i<res.data.length;i++) {
71 matchList.value.push(res2.data) 71 console.log(res.data[i].id)
72 }) 72 const matchData = await match.getTreeDetail(res.data[i].id)
73 }) 73 matchList.value.push(matchData.data)
74 }
74 } 75 }
75 }) 76 })
76 } 77 }
...@@ -142,7 +143,6 @@ const goback = function () { ...@@ -142,7 +143,6 @@ const goback = function () {
142 143
143 .photo-img { 144 .photo-img {
144 width: 100%; 145 width: 100%;
145 aspect-ratio: 2/1;
146 cursor: pointer; 146 cursor: pointer;
147 } 147 }
148 148
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!