<script setup>
import bgImg from '~/assets/ysgc/back.png';
const router = useRouter()

function routerPush(name, data) {
  router.push({ name, ...data })
}
const yslm_list = ref([]);
const currentPage = ref(1);
const limit = ref(8);
const total = ref(0);

function windowOpen(href) {
  window.open(href)
}

function initYswzData() {
  request({
    url: '/szmsg/zp/index',
    data: { page: currentPage.value, limit: limit.value }
  }).then(res => {
    if (res.code === '1') {
      yslm_list.value = res.data.page_data;
      total.value = parseInt(res.data.total_rows);
    }
  })
}
initYswzData()


function handleCurrentChange(val) {
  currentPage.value = val;
  initYswzData();
}
</script>

<template>
  <common-header />
  <div class="ysgc">
    <div class="flex_center h-70px my-16">
      <div class="text-5xl font-bold">特色作品,搜索一下</div>
    </div>
    <div class="ysgc-kind">
      <div class="specail grid grid-cols-4 gap-8">
        <div class="flex" v-for="i in yslm_list" :key="i">
          <div class="rounded-xl shadow bg-white flex flex-col overflow-hidden cursor-pointer" :key="i" @click="windowOpen(i.sz_web_url)">
            <div class="w-full flex-none h-198px w-332px">
              <img :src="getFullUrl(i.sz_img)" alt="" class="w-full h-full" />
            </div>
            <div class="p-2 flex justify-between items-center flex-auto mb-4 text-sm">
              {{ i.sz_name }}
            </div>
          </div>
        </div>
      </div>

      <div class="flex justify-end mt-8">
        <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="limit" :currentPage="currentPage"></el-pagination>
      </div>
    </div>
  </div>
  <common-footer />
</template>


<style lang="scss" scoped>
.ysgc {
  width: 100%;
  min-width: 1280px;
  padding-bottom: 60px;

  .ysgc-kind {
    width: 1440px;
    // min-width: 1280px;
    margin: 0 auto;
    // margin-top: -180px;
    background: url("../../../assets/ysgc/back.png");
    background-repeat: no-repeat;

    .specail {
      // min-width: 1280px;
      // width: 100%;
      // display: flex;
      // flex-wrap: wrap;

      li {
        margin: 0 0 27px 0;
        overflow: hidden;
      }

      .kc {
        width: 337px;
        height: 278px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
        position: relative;

        .kc-back {
          width: 100%;
        }

        .kc-des {
          padding: 11px 6px;
          box-sizing: border-box;

          .kc-name {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #050026;
            line-height: 22px;
          }

          .rate {
            display: flex;
            margin: 11px 0;

            img {
              margin-right: 6px;
            }
          }
        }

        .zan {
          position: absolute;
          top: 0;
          right: 0;
          width: 173px;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          color: #fff;
          display: flex;
          padding-left: 20px;
          background: rgba(0, 0, 0, 0.59);
          border-radius: 0px 12px 0px 12px;

          img {
            display: inline-block;
            width: 17px;
            height: 16px;
            margin: 8px 5px 0 10px;
          }
        }
      }
    }
  }
}
</style>
