no message
Showing
2 changed files
with
38 additions
and
14 deletions
| ... | @@ -9,18 +9,23 @@ | ... | @@ -9,18 +9,23 @@ |
| 9 | 9 | ||
| 10 | <div class="indexTitle"> | 10 | <div class="indexTitle"> |
| 11 | <h3 class="leftboderTT">{{ language==0?'赛事报道':'Special reports' }}</h3> | 11 | <h3 class="leftboderTT">{{ language==0?'赛事报道':'Special reports' }}</h3> |
| 12 | <!-- <a class="more" @click="goList(query2.sortId,'专题报道')">MORE</a>--> | 12 | <a class="more" v-if="newsList2.length>3" @click="goList(query2.code,'专题报道')">MORE</a> |
| 13 | </div> | 13 | </div> |
| 14 | <div> | 14 | <div> |
| 15 | <div class="item" v-for="n in newsList2" :key="n.id" @click="goDetail(n)"> | 15 | <div class="item news2" v-for="(n,index) in newsList2" v-show="index<3" :key="n.id" @click="goDetail(n)"> |
| 16 | <p class="esp">{{ n.name }}</p> | 16 | <div class="imgbox" v-if="n.picUrl" @click="goDetail(n)"> |
| 17 | <img :src="fillImgUrl(n.picUrl)"> | ||
| 18 | </div> | ||
| 19 | <div> | ||
| 20 | <p class="esp_2">{{ n.name }}</p> | ||
| 21 | </div> | ||
| 17 | </div> | 22 | </div> |
| 18 | </div> | 23 | </div> |
| 19 | 24 | ||
| 20 | <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事视频':'VEDIOS' }}</h3> | 25 | <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事视频':'VEDIOS' }}</h3> |
| 21 | <!-- <a class="more" @click="goList(10000006,'赛事视频')">MORE</a>--> | 26 | <!-- <a class="more" @click="goList(10000006,'赛事视频')">MORE</a>--> |
| 22 | </div> | 27 | </div> |
| 23 | <div class="item" v-for="n in newsList" :key="n.id" @click="goDetail(n)"> | 28 | <div class="item" v-for="(n,index) in newsList" v-show="index<3" :key="n.id" @click="goDetail(n)"> |
| 24 | <div class="videoImgbox" @click="goDetail(n)"> | 29 | <div class="videoImgbox" @click="goDetail(n)"> |
| 25 | <img :src="fillImgUrl(n.picUrl)"> | 30 | <img :src="fillImgUrl(n.picUrl)"> |
| 26 | </div> | 31 | </div> |
| ... | @@ -28,7 +33,7 @@ | ... | @@ -28,7 +33,7 @@ |
| 28 | <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事图片':'PHOTOS' }}</h3> | 33 | <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事图片':'PHOTOS' }}</h3> |
| 29 | <!-- <a class="more" @click="goList(10000007,'赛事图片')">MORE</a>--> | 34 | <!-- <a class="more" @click="goList(10000007,'赛事图片')">MORE</a>--> |
| 30 | </div> | 35 | </div> |
| 31 | <div v-for="n in newsList3" :key="n.id" @click="goDetail(n)"> | 36 | <div v-for="(n,index) in newsList3" v-show="index<3" :key="n.id" @click="goDetail(n)"> |
| 32 | <div class="picbox"><img :src="fillImgUrl(n.picUrl)"/></div> | 37 | <div class="picbox"><img :src="fillImgUrl(n.picUrl)"/></div> |
| 33 | </div> | 38 | </div> |
| 34 | </el-card> | 39 | </el-card> |
| ... | @@ -51,17 +56,17 @@ const newsList = ref([]) | ... | @@ -51,17 +56,17 @@ const newsList = ref([]) |
| 51 | const newsList2 = ref([]) | 56 | const newsList2 = ref([]) |
| 52 | const newsList3 = ref([]) | 57 | const newsList3 = ref([]) |
| 53 | const query1 = ref({ | 58 | const query1 = ref({ |
| 54 | pageSize: 1, | 59 | pageSize: 5, |
| 55 | pageNum: 1, | 60 | pageNum: 1, |
| 56 | code: `${props.matchId}${language.value == 0 ?'100':'101'}2` | 61 | code: `${props.matchId}${language.value == 0 ?'100':'101'}2` |
| 57 | }) | 62 | }) |
| 58 | const query2 = ref({ | 63 | const query2 = ref({ |
| 59 | pageSize: 3, | 64 | pageSize: 5, |
| 60 | pageNum: 1, | 65 | pageNum: 1, |
| 61 | code: `${props.matchId}${language.value == 0 ?'100':'101'}1` | 66 | code: `${props.matchId}${language.value == 0 ?'100':'101'}1` |
| 62 | }) | 67 | }) |
| 63 | const query3 = ref({ | 68 | const query3 = ref({ |
| 64 | pageSize: 1, | 69 | pageSize: 5, |
| 65 | pageNum: 1, | 70 | pageNum: 1, |
| 66 | code: `${props.matchId}${language.value == 0 ?'100':'101'}3` | 71 | code: `${props.matchId}${language.value == 0 ?'100':'101'}3` |
| 67 | }) | 72 | }) |
| ... | @@ -90,7 +95,8 @@ const goList = (sortId,name) => { | ... | @@ -90,7 +95,8 @@ const goList = (sortId,name) => { |
| 90 | router.push({ | 95 | router.push({ |
| 91 | path: `/news/list/${sortId}`, | 96 | path: `/news/list/${sortId}`, |
| 92 | query:{ | 97 | query:{ |
| 93 | kindName:name | 98 | kindName:name, |
| 99 | code:sortId | ||
| 94 | } | 100 | } |
| 95 | }) | 101 | }) |
| 96 | } | 102 | } |
| ... | @@ -106,6 +112,12 @@ const goDetail = (n) => { | ... | @@ -106,6 +112,12 @@ const goDetail = (n) => { |
| 106 | </script> | 112 | </script> |
| 107 | 113 | ||
| 108 | <style scoped lang="scss"> | 114 | <style scoped lang="scss"> |
| 115 | .news2{display: flex;margin: 0 0 20px; | ||
| 116 | .imgbox{margin-right: 15px;height: calc(900px/16);width: 100px; | ||
| 117 | img{object-fit: cover;width:100px;height: 100%;} | ||
| 118 | } | ||
| 119 | .esp_2{margin: 0;} | ||
| 120 | } | ||
| 109 | .indexTitle{margin: 20px 0 12px; | 121 | .indexTitle{margin: 20px 0 12px; |
| 110 | h3{ | 122 | h3{ |
| 111 | font-size: 20px; | 123 | font-size: 20px; | ... | ... |
| ... | @@ -13,7 +13,8 @@ | ... | @@ -13,7 +13,8 @@ |
| 13 | <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p> | 13 | <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="n.picUrl" class="imgbox"> | 15 | <div v-if="n.picUrl" class="imgbox"> |
| 16 | <img :src="fillImgUrl_webSite(n.picUrl)"> | 16 | <img v-if="query.code" :src="fillImgUrl(n.picUrl)"> |
| 17 | <img v-else :src="fillImgUrl_webSite(n.picUrl)"> | ||
| 17 | </div> | 18 | </div> |
| 18 | <div class="item-body"> | 19 | <div class="item-body"> |
| 19 | <h3 class="esp_2" v-html="n.name" /> | 20 | <h3 class="esp_2" v-html="n.name" /> |
| ... | @@ -42,7 +43,7 @@ | ... | @@ -42,7 +43,7 @@ |
| 42 | <script setup> | 43 | <script setup> |
| 43 | import { ArrowRight, Search } from '@element-plus/icons-vue' | 44 | import { ArrowRight, Search } from '@element-plus/icons-vue' |
| 44 | import { onMounted, ref } from 'vue' | 45 | import { onMounted, ref } from 'vue' |
| 45 | import { getNewsListById } from '@/apiPc/webSite' | 46 | import {getNewsListById, getnoteListcptid} from '@/apiPc/webSite' |
| 46 | import { useRoute, useRouter } from 'vue-router' | 47 | import { useRoute, useRouter } from 'vue-router' |
| 47 | import {useStorage} from "@vueuse/core/index"; | 48 | import {useStorage} from "@vueuse/core/index"; |
| 48 | const language = useStorage('language', 0) | 49 | const language = useStorage('language', 0) |
| ... | @@ -58,11 +59,22 @@ const query = ref({ | ... | @@ -58,11 +59,22 @@ const query = ref({ |
| 58 | }) | 59 | }) |
| 59 | onMounted(() => { | 60 | onMounted(() => { |
| 60 | console.log(route) | 61 | console.log(route) |
| 61 | query.value.sortId = route.params.id | ||
| 62 | kindName.value = route.query.kindName | 62 | kindName.value = route.query.kindName |
| 63 | getList() | ||
| 64 | }) | ||
| 65 | 63 | ||
| 64 | if(route.query.code){ | ||
| 65 | query.value.code = route.query.code | ||
| 66 | getnotebycode() | ||
| 67 | } else { | ||
| 68 | query.value.sortId = route.params.id | ||
| 69 | getList() | ||
| 70 | } | ||
| 71 | }) | ||
| 72 | const getnotebycode = () => { | ||
| 73 | getnoteListcptid(query.value).then(res => { | ||
| 74 | newsList.value = res.rows | ||
| 75 | total.value = res.total | ||
| 76 | }) | ||
| 77 | } | ||
| 66 | const getList = () => { | 78 | const getList = () => { |
| 67 | console.log(query.value) | 79 | console.log(query.value) |
| 68 | getNewsListById(query.value).then(res => { | 80 | getNewsListById(query.value).then(res => { | ... | ... |
-
Please register or sign in to post a comment