8.28 lpt instagram

@@ -143,6 +143,19 @@ export const constantRoutes = [
         ]
       },
       {
+        path: 'instagram',
+        component: Empty,
+        redirect: '/instagram/index',
+        children: [
+          {
+            path: 'index',
+            component: () => import('@/viewsPc/instagram/index'),
+            name: 'instagram',
+            meta: {title: ''}
+          }
+        ]
+      },
+      {
         path: 'mall',
         component: Empty,
         redirect: '/mall/index',

@@ -52,7 +52,7 @@
                   </el-col>
                   <el-col :lg="6" :xs="24">
                     <div class="endbox">
-                      <el-button class="endBtn">{{ languageLibrary[language].f }}</el-button>
+                      <el-button class="endBtn" @click="goContestDetail(n)">{{ languageLibrary[language].f }}</el-button>
                     </div>
                   </el-col>
                 </el-row>
@@ -98,7 +98,7 @@
       <div class="box">
         <div class="indexTitle">
           <h3 class="leftboderTT" style="text-transform:none">Instagram</h3>
-          <a class="more" href="#/photo">{{ languageLibrary[language].b }}</a>
+          <a class="more" href="#/instagram">{{ languageLibrary[language].b }}</a>
         </div>
         <el-row :gutter="20">
           <el-col
@@ -273,6 +273,12 @@ const goDetail = (n) => {
   }
 }
 
+const goContestDetail = (n) => {
+  router.push({
+    path: `/contest/list/${n.noteId}`
+  })
+}
+
 const goList = (query, name) => {
   query.sortName = name
   router.push({

+<template>
+  <div>
+    <div class="box" style="padding: 0 10%">
+      <el-row class="contest-title">
+        <el-col>
+          <h3>{{ languageLibrary[language].a }}</h3>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col class="photo-space" :lg="8" v-for="item in itemList">
+          <div class="photo-img-group">
+            <img class="photo-img" @click="goDetail(item)" :src="fillImgUrl('/fs/20250729/image/8638425535731875840.png')">
+          </div>
+        </el-col>
+      </el-row>
+      <el-pagination class="photo-pagination"  background layout="pager" :total="1000" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ArrowRight, Search } from '@element-plus/icons-vue'
+import { onMounted, ref } from 'vue'
+import { getNewsListById } from '@/apiPc/webSite'
+import { useRouter } from 'vue-router'
+import {useStorage} from "@vueuse/core/index";
+const language = useStorage('language', 0)
+const languageLibrary = [{
+  a:'Instagram'
+},{
+  a:'Instagram'
+},{
+  a:'Instagram'
+},{
+  a:'Instagram'
+},{
+  a:'Instagram'
+}]
+const router = useRouter()
+const searchParam = ref({
+  type:'1',
+  text:'',
+})
+const itemList = ref(['a','a','a','a','a','a','a','a','a'])
+
+onMounted(() => {
+
+})
+
+const getList = (obj) => {
+  getNewsListById(obj).then(res => {
+    newsList.value = res.rows
+  })
+}
+
+const goDetail = (id) => {
+  router.push({
+    path: `/photo/detail/${id}`
+  })
+}
+</script>
+<style lang="scss" scoped>
+.photo-pagination {
+  justify-content: center;
+  margin: 10px;
+
+  :deep(.el-pager li) {
+    background: transparent;
+    color: #fff;
+  }
+
+  :deep(.el-pager li.is-active) {
+    background: #CAA767;
+  }
+}
+
+.photo-space {
+  padding: 10px;
+}
+
+.photo-img-group {
+  padding: 20px;
+  width: 100%;
+  position: relative;
+
+  .photo-img-layer1 {
+    height: 6px;
+    border-radius: 6px 6px 0 0;
+    background: #454D6C;
+    width: 60%;
+    margin: 1px auto;
+  }
+
+  .photo-img-layer2 {
+    height: 6px;
+    border-radius: 6px 6px 0 0;
+    background: #454D6C;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .photo-img-info {
+    position: absolute;
+    bottom: 20px;
+    background: rgba(44, 44, 44, 0.8);
+    width: calc(100% - 40px);
+    height: 50px;
+    padding-left: 20px;
+    color: #fff;
+  }
+}
+
+.photo-img {
+  width: 100%;
+  aspect-ratio: 2/1;
+  cursor: pointer;
+}
+
+.contest-title {
+  h3 {
+    color: #fff;
+    font-size: 32px;
+  }
+
+  .contest-title-btn {
+    background: transparent;
+    color: #fff;
+    border: none;
+    border-radius: 15px;
+  }
+
+  .btn-active {
+    background: rgba(255,255,255,0.3);
+  }
+
+  .search-input {
+    height: 50px;
+    border: none;
+    background: #0E142C;
+    border-radius: 25px;
+
+    .search-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 20px;
+      background: #232B49;
+      color: #fff;
+      padding: 0;
+    }
+
+    :deep(.el-input__wrapper) {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :deep(.el-input-group__append) {
+      width: 50px;
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+
+
+}
+
+.firstItem{cursor: pointer;
+  background: #F7F8FC;height: 100%;padding: 10px 20px;
+  .date{font-weight: bold;transform: scaleX(0.7);transform-origin: left;
+    font-size: 18px;
+    color: #4C5359;
+    p{margin: 5px 0;}
+  }
+  h3{margin: 10px 0;
+    font-size: 22px;}
+  .go{color: #929AA0;
+    font-size: 14px;padding: 0 0 5px;}
+  &:hover{background: #dcdde1;}
+}
+.newsLine{
+  margin: 20px;
+  .firstItem{margin-bottom: 10px;}
+  .item{display: flex;position: relative;width: 100%;height: 90px;
+    align-items: center;cursor: pointer;border-bottom: 1px solid #EEEEEE;
+    .date{width: 60px;height: 60px;text-align: center;background: #FAFAFA;margin: 0 10px;
+      .day{color: #4C5359;transform: scaleX(0.7);font-weight: bold;font-size: 24px;}
+      p{font-size: 14px;margin: 0;transform: scaleX(0.7);font-weight: bold;color: #7B7F83;}
+    }
+    .item-body{width: 60%;
+      h3{padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 18px;color: #000000;}
+    }
+    .go{background: url("@/assets/v1/about/go.png") no-repeat center;background-size: contain;
+      position: absolute;width: 30px;height: 30px;right: 10px;
+      filter:grayscale(1);
+    }
+  }
+  .item:hover{background: #f7f8fc;
+    .date{
+      background:#000;
+      .day{color: #fff;}
+      p{color: #fff;}
+    }
+    .item-body{
+      h3{color: #000;}
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .box{width: 100%}
+  .forWei {
+    display: block;
+  }
+  .forPc{display: none}
+  :deep(.el-tabs__nav-scroll){overflow: auto;}
+  :deep(.el-card__body){padding: 10px;}
+  .flexBody{display: block;background: transparent;}
+  .infoPart{background: #fff;padding: 10px;margin:0 15px}
+  .firstItem{padding: 10px 20px;
+    .date{
+      font-size: 14px;}
+    h3{margin: 10px 0;
+      font-size: 14px;}
+    .go{font-size: 12px;}
+  }
+  .newsLine{
+    .item{height: 50px;
+      .date{height: 34px;width: 44px;margin: 0;
+        .day{font-size: 16px;}
+        p{font-size: 12px;}
+      }
+      .item-body{width: 80%;
+        h3{font-size: 14px;}
+      }
+    }
+    .go{display: none;}
+
+  }
+}
+</style>
+

@@ -84,8 +84,8 @@ export default defineConfig(({mode, command}) => {
         },
         '/dev-api': {
           // target: 'http://192.168.1.118:8082/',
-          // target: 'http://192.168.1.22:8082',
-          target: 'https://tk005.wxjylt.com/stage-api',
+          target: 'http://192.168.1.83:8082',
+          // target: 'https://tk005.wxjylt.com/stage-api',
           // target: 'http://124.70.181.90:1880/stage-api',
           // target: 'https://sys.2025wtcwuxi.com/stage-api/',
           changeOrigin: true,