17f7128e by zrj

8.28 lpt instagram

1 parent 961ae11e
...@@ -143,6 +143,19 @@ export const constantRoutes = [ ...@@ -143,6 +143,19 @@ export const constantRoutes = [
143 ] 143 ]
144 }, 144 },
145 { 145 {
146 path: 'instagram',
147 component: Empty,
148 redirect: '/instagram/index',
149 children: [
150 {
151 path: 'index',
152 component: () => import('@/viewsPc/instagram/index'),
153 name: 'instagram',
154 meta: {title: ''}
155 }
156 ]
157 },
158 {
146 path: 'mall', 159 path: 'mall',
147 component: Empty, 160 component: Empty,
148 redirect: '/mall/index', 161 redirect: '/mall/index',
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
52 </el-col> 52 </el-col>
53 <el-col :lg="6" :xs="24"> 53 <el-col :lg="6" :xs="24">
54 <div class="endbox"> 54 <div class="endbox">
55 <el-button class="endBtn">{{ languageLibrary[language].f }}</el-button> 55 <el-button class="endBtn" @click="goContestDetail(n)">{{ languageLibrary[language].f }}</el-button>
56 </div> 56 </div>
57 </el-col> 57 </el-col>
58 </el-row> 58 </el-row>
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
98 <div class="box"> 98 <div class="box">
99 <div class="indexTitle"> 99 <div class="indexTitle">
100 <h3 class="leftboderTT" style="text-transform:none">Instagram</h3> 100 <h3 class="leftboderTT" style="text-transform:none">Instagram</h3>
101 <a class="more" href="#/photo">{{ languageLibrary[language].b }}</a> 101 <a class="more" href="#/instagram">{{ languageLibrary[language].b }}</a>
102 </div> 102 </div>
103 <el-row :gutter="20"> 103 <el-row :gutter="20">
104 <el-col 104 <el-col
...@@ -273,6 +273,12 @@ const goDetail = (n) => { ...@@ -273,6 +273,12 @@ const goDetail = (n) => {
273 } 273 }
274 } 274 }
275 275
276 const goContestDetail = (n) => {
277 router.push({
278 path: `/contest/list/${n.noteId}`
279 })
280 }
281
276 const goList = (query, name) => { 282 const goList = (query, name) => {
277 query.sortName = name 283 query.sortName = name
278 router.push({ 284 router.push({
......
1 <template>
2 <div>
3 <div class="box" style="padding: 0 10%">
4 <el-row class="contest-title">
5 <el-col>
6 <h3>{{ languageLibrary[language].a }}</h3>
7 </el-col>
8 </el-row>
9 <el-row>
10 <el-col class="photo-space" :lg="8" v-for="item in itemList">
11 <div class="photo-img-group">
12 <img class="photo-img" @click="goDetail(item)" :src="fillImgUrl('/fs/20250729/image/8638425535731875840.png')">
13 </div>
14 </el-col>
15 </el-row>
16 <el-pagination class="photo-pagination" background layout="pager" :total="1000" />
17 </div>
18 </div>
19 </template>
20 <script setup>
21 import { ArrowRight, Search } from '@element-plus/icons-vue'
22 import { onMounted, ref } from 'vue'
23 import { getNewsListById } from '@/apiPc/webSite'
24 import { useRouter } from 'vue-router'
25 import {useStorage} from "@vueuse/core/index";
26 const language = useStorage('language', 0)
27 const languageLibrary = [{
28 a:'Instagram'
29 },{
30 a:'Instagram'
31 },{
32 a:'Instagram'
33 },{
34 a:'Instagram'
35 },{
36 a:'Instagram'
37 }]
38 const router = useRouter()
39 const searchParam = ref({
40 type:'1',
41 text:'',
42 })
43 const itemList = ref(['a','a','a','a','a','a','a','a','a'])
44
45 onMounted(() => {
46
47 })
48
49 const getList = (obj) => {
50 getNewsListById(obj).then(res => {
51 newsList.value = res.rows
52 })
53 }
54
55 const goDetail = (id) => {
56 router.push({
57 path: `/photo/detail/${id}`
58 })
59 }
60 </script>
61 <style lang="scss" scoped>
62 .photo-pagination {
63 justify-content: center;
64 margin: 10px;
65
66 :deep(.el-pager li) {
67 background: transparent;
68 color: #fff;
69 }
70
71 :deep(.el-pager li.is-active) {
72 background: #CAA767;
73 }
74 }
75
76 .photo-space {
77 padding: 10px;
78 }
79
80 .photo-img-group {
81 padding: 20px;
82 width: 100%;
83 position: relative;
84
85 .photo-img-layer1 {
86 height: 6px;
87 border-radius: 6px 6px 0 0;
88 background: #454D6C;
89 width: 60%;
90 margin: 1px auto;
91 }
92
93 .photo-img-layer2 {
94 height: 6px;
95 border-radius: 6px 6px 0 0;
96 background: #454D6C;
97 width: 80%;
98 margin: 0 auto;
99 }
100
101 .photo-img-info {
102 position: absolute;
103 bottom: 20px;
104 background: rgba(44, 44, 44, 0.8);
105 width: calc(100% - 40px);
106 height: 50px;
107 padding-left: 20px;
108 color: #fff;
109 }
110 }
111
112 .photo-img {
113 width: 100%;
114 aspect-ratio: 2/1;
115 cursor: pointer;
116 }
117
118 .contest-title {
119 h3 {
120 color: #fff;
121 font-size: 32px;
122 }
123
124 .contest-title-btn {
125 background: transparent;
126 color: #fff;
127 border: none;
128 border-radius: 15px;
129 }
130
131 .btn-active {
132 background: rgba(255,255,255,0.3);
133 }
134
135 .search-input {
136 height: 50px;
137 border: none;
138 background: #0E142C;
139 border-radius: 25px;
140
141 .search-btn {
142 width: 40px;
143 height: 40px;
144 border-radius: 20px;
145 background: #232B49;
146 color: #fff;
147 padding: 0;
148 }
149
150 :deep(.el-input__wrapper) {
151 background: transparent;
152 box-shadow: none;
153 }
154
155 :deep(.el-input-group__append) {
156 width: 50px;
157 background: transparent;
158 box-shadow: none;
159 }
160 }
161
162
163 }
164
165 .firstItem{cursor: pointer;
166 background: #F7F8FC;height: 100%;padding: 10px 20px;
167 .date{font-weight: bold;transform: scaleX(0.7);transform-origin: left;
168 font-size: 18px;
169 color: #4C5359;
170 p{margin: 5px 0;}
171 }
172 h3{margin: 10px 0;
173 font-size: 22px;}
174 .go{color: #929AA0;
175 font-size: 14px;padding: 0 0 5px;}
176 &:hover{background: #dcdde1;}
177 }
178 .newsLine{
179 margin: 20px;
180 .firstItem{margin-bottom: 10px;}
181 .item{display: flex;position: relative;width: 100%;height: 90px;
182 align-items: center;cursor: pointer;border-bottom: 1px solid #EEEEEE;
183 .date{width: 60px;height: 60px;text-align: center;background: #FAFAFA;margin: 0 10px;
184 .day{color: #4C5359;transform: scaleX(0.7);font-weight: bold;font-size: 24px;}
185 p{font-size: 14px;margin: 0;transform: scaleX(0.7);font-weight: bold;color: #7B7F83;}
186 }
187 .item-body{width: 60%;
188 h3{padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 18px;color: #000000;}
189 }
190 .go{background: url("@/assets/v1/about/go.png") no-repeat center;background-size: contain;
191 position: absolute;width: 30px;height: 30px;right: 10px;
192 filter:grayscale(1);
193 }
194 }
195 .item:hover{background: #f7f8fc;
196 .date{
197 background:#000;
198 .day{color: #fff;}
199 p{color: #fff;}
200 }
201 .item-body{
202 h3{color: #000;}
203 }
204 }
205 }
206
207 @media (max-width: 500px) {
208 .box{width: 100%}
209 .forWei {
210 display: block;
211 }
212 .forPc{display: none}
213 :deep(.el-tabs__nav-scroll){overflow: auto;}
214 :deep(.el-card__body){padding: 10px;}
215 .flexBody{display: block;background: transparent;}
216 .infoPart{background: #fff;padding: 10px;margin:0 15px}
217 .firstItem{padding: 10px 20px;
218 .date{
219 font-size: 14px;}
220 h3{margin: 10px 0;
221 font-size: 14px;}
222 .go{font-size: 12px;}
223 }
224 .newsLine{
225 .item{height: 50px;
226 .date{height: 34px;width: 44px;margin: 0;
227 .day{font-size: 16px;}
228 p{font-size: 12px;}
229 }
230 .item-body{width: 80%;
231 h3{font-size: 14px;}
232 }
233 }
234 .go{display: none;}
235
236 }
237 }
238 </style>
239
...@@ -84,8 +84,8 @@ export default defineConfig(({mode, command}) => { ...@@ -84,8 +84,8 @@ export default defineConfig(({mode, command}) => {
84 }, 84 },
85 '/dev-api': { 85 '/dev-api': {
86 // target: 'http://192.168.1.118:8082/', 86 // target: 'http://192.168.1.118:8082/',
87 // target: 'http://192.168.1.22:8082', 87 target: 'http://192.168.1.83:8082',
88 target: 'https://tk005.wxjylt.com/stage-api', 88 // target: 'https://tk005.wxjylt.com/stage-api',
89 // target: 'http://124.70.181.90:1880/stage-api', 89 // target: 'http://124.70.181.90:1880/stage-api',
90 // target: 'https://sys.2025wtcwuxi.com/stage-api/', 90 // target: 'https://sys.2025wtcwuxi.com/stage-api/',
91 changeOrigin: true, 91 changeOrigin: true,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!