zhitiqiao/src/view/special.vue

<template>
  <div>
    <div class="swiperBox">
        <el-carousel height="450px" >
      <el-carousel-item v-for="item in bannerList" :key="item" >
       <img class="swiperImg" :src="item.logo" alt="" @click="toUrl(item)">
      </el-carousel-item>
    </el-carousel>
    </div>
    <div class="main">
        <div class="leftSlide">
            <div class="special">
        
        <div class="specialItem u-flex" @click="toInfo(item)" v-for="(item,index) in specialList" :key="index">
          <img class="poster" :src="item.logo" alt="">
          <div class="specialItemInfo">
            <div class="specialItemInfoTitle">
              {{item.title}}
            </div>
            <div class="specialItemTips u-row-between">
              <div>
                <img style="height: 12px;" src="../assets/image/eye.png" alt="">{{item.page_view}}
              </div>
              <div>
                {{item.create_at}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination background @current-change="pageChange" :page-size="page_num" layout="prev, pager, next" :total="count" />
    </div>
        </div>
        <div class="rightSlide">
            <HotMessage/>
        </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter } from "vue-router"
import {onMounted ,ref} from "vue"
import HotMessage from '@/components/HotMessage.vue'
import {banner,subject_list} from '@/utils/api'

onMounted(()=>{
  getBanner()
  getSpecialList()
})
let router=useRouter()

let toInfo=(item)=>{
    router.push('specialInfo?id='+item.id)
}
let page=ref(1)
let page_num=ref(10)
let count=ref(0)
let specialList=ref([])
let getSpecialList=()=>{
  subject_list({page:page.value,page_num:page_num.value}).then(res=>{
    specialList.value=res.data.list
    count.value=res.data.count
  })
}
let pageChange=(e)=>{
  page.value=e
  getSpecialList()
}
let bannerList=ref([])
let getBanner=()=>{
  banner().then(res=>{
    bannerList.value=res.data
  })
}
let toUrl=(item)=>{
  window.location.href=item.url
}
</script>
<style>
.el-carousel__item{
  text-align: center;
}
</style>
<style lang="scss" scoped>
.page{
  width: 1200px;
  margin: 40px auto 230px;
  padding-left: 141px;
}
.swiperImg{
// width: 100%;
height: 100%;
}
.main{
    display: flex;
    width: 1200px;
    margin: 40px auto;
    .leftSlide{
        width: 800px;
        margin-right: 20px;
        .special{
  width: 800px;
border-radius: 10px;
padding: 0 12px 0;

.specialItem{
    
border-radius: 10px;
background: #FFFFFF;

    padding: 20px;
  margin-bottom: 20px;
  .poster{
    margin-right: 17px;
    width: 239px;
height: 156px;
border-radius: 10px;
  }
  .specialItemInfo{
    flex: 1;
    .specialItemInfoTitle{
      font-size: 24px;
      font-weight: bold;
    }
    .specialItemTips{
      margin-top: 53px;
      div{
        display: flex;
        color: #999999;
        align-items: center;
        img{
          width: 16px;
          margin-right: 11px;
        }
      }
    }
  }
}
}
    }
}
</style>