8.28 lpt instagram
Showing
4 changed files
with
262 additions
and
4 deletions
| ... | @@ -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({ | ... | ... |
src/viewsPc/instagram/index.vue
0 → 100644
| 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, | ... | ... |
-
Please register or sign in to post a comment