su_nan_guan_wang/src/views/company/index.vue

<template>
    <div style="background: #f0f0f0;padding-bottom:50px">
        <div class="banner">
            <img src="~@/assets/images/zmqy.jpg" alt="">
        </div>
        <div class="bread">
            <div>
                <span>当前位置:首页-知名企业</span>
            </div>
        </div>
        <div class="smart-device">
            <div class="smart-title">
                <span><span>知名企业</span>ENTERPRISE</span>
            </div>
            <div class="smart-device-content">
                <div class="nav-company">
                    <div>
                        <ul>
                            <li v-for="item in companyTypeList" :class="active==item.value?'active':''" @click="changeType(item.value)"><span>{{item.label}}</span></li>
<!--                            <li :class="active==1?'active':''" @click="active=1"><span>全部</span></li>-->
<!--                            <li :class="active==2?'active':''" @click="active=2"><span>新能源</span></li>-->
<!--                            <li :class="active==3?'active':''" @click="active=3"><span>金融</span></li>-->
<!--                            <li :class="active==4?'active':''" @click="active=4"><span>生物科技</span></li>-->
<!--                            <li :class="active==5?'active':''" @click="active=5"><span>软件</span></li>-->
<!--                            <li :class="active==6?'active':''" @click="active=6"><span>物联网</span></li>-->
                        </ul>
                    </div>
                </div>
                <ul class="company-list">
                    <li v-for="(item,index) in zsList" :key="index" @click="detail(item)">
                        <div class="wrap-device-detail">
                            <div class="c-logo">
                                <img :src="'https://smartpark.idea-sf.com'+item.img" alt="">
                            </div>
                            <div class="c-content">
                                <h3>{{item.name}}</h3>
                                <p style=" height: 5rem;">{{item.detail}}</p>
                            </div>
                            <div class="detail-btn">
                                <span>查看详情</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="paginationo-box">
                  <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
                        <template #prev-text>
                            <van-icon name="arrow-left" />
                        </template>
                        <template #next-text>
                            <van-icon name="arrow" />
                        </template>
                        <template #page="{ text }">{{ text }}</template>
                    </van-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getPropaganda} from "@/service/api_service";
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
export default {
        mixins: [Base, BaseData],
        data () {
            return {
                dc_key: ['company_type'],
                active:0,
                currentPage:1,
                total:0,
                zsList:[
                    // {
                    //     img:'clogo.png',
                    //     name:'北京网讯互联网科技有限公司',
                    //     eventIndex:1,
                    //     detail:'我是一家很知名的公司我是一家很知名的公司我是一家很知名的公司我是一家很知名的公司我是一家很知名的公司我是一家很知名的公司我是一家很知名的公司'
                    // },

                ],
              search: {
                pageNum: 1,
                pageSize: 8,
                status: 'published',
              },
              companyTypeList:[]
            }
        },
        mounted() {
            document.documentElement.scrollTop = document.body.scrollTop =0; //回到顶部
          this.initDict(this.dc_key,true).then((res) => {
            this.companyTypeList = this.dc_data.company_type
            this.getData()
          })
          if (window.history && window.history.pushState) {
            // 向历史记录中插入了当前页
            history.pushState(null, null, document.URL)
            window.addEventListener('popstate', this.goBack, false)
          }
        },
        destroyed() {
          window.removeEventListener('popstate', this.goBack, false)
        },
        methods: {
          goBack() {
            // console.log("点击了浏览器的返回按钮");
            // sessionStorage.clear()
            // window.history.back()
            // history.pushState(null, null, document.URL)
            this.$router.push({ path: '/' })
          },
          changeType(active){
            this.search.pageNum = 1
            this.search.companyType = active
            this.active=active
            this.getData()
          },
          handleCurrentChange: function(val) {
            this.search.pageNum = val
            this.getData()
          },
            getData(){
              getPropaganda(this.search).then(res=>{
                if(res.rows){
                  this.total = res.total
                  this.zsList = []
                  res.rows.forEach(item=>{
                    let url = ''
                    if(item.logo&&item.logo.length>2){
                      const annex = this.$common.castEval(item.logo)
                      url = annex[0].url
                    }
                    const i = {
                      img:this.$common.replaceWxDownload(url),
                      name:item.companyName,
                      content:item.content,
                      detail:item.introduction
                    }
                    this.zsList.push(i)
                  })
                }
              })
            },
            detail(index){
              this.$router.push({name:'companyDetail',params:index})
            }
        },
    };
</script>

<style scoped>
    .banner img{
        width: 100% !important;
    }
    @media screen and (min-width: 1000px){
        .bread{
            background: #fff;
        }
        .bread div{
            width: 1200px;
            margin: 0 auto;
            text-align: left;
            padding: 0.8rem 0;
            font-size: 1rem;
        }
        .smart-title{
            margin-top:3rem;
        }
        .smart-device{
            width: 1200px;
            margin: 0 auto;
            text-align: left;
            font-size: 1rem;
        }
        .smart-device span span{
            font-size: 2rem;
            display: inline-block;
            position: relative;
            padding-right: 1rem;
            margin-right: 1rem;
            font-weight: 900;
        }
        .smart-device span span:after{
            content: '';
            width: 1px;
            height: 15px;
            background: #666;
            position: absolute;
            right: 0;
            bottom: 7px;
        }
        .nav-company{
            margin: 3rem 0;
        }
        .nav-company>div{
            width: 97%;
            margin: 0 auto;
            background: #fff;
            padding: 1rem 0;
        }
        .nav-company ul{
            display: flex;
            width: 80%;
            margin: 0 auto;
            justify-content: center;
            flex-wrap: nowrap;
        }
        .nav-company ul li{
            width: 6rem;
            text-align: center;
            cursor: pointer;
        }
        .nav-company ul li span{
            width: 80%;
            margin: 0 auto;
            display: inline-block;
            text-align: center;
            color: #333;
        }
        .wrap-device-detail{
            background: #fff;
            width: 90%;
            margin: 0 auto;
            border-bottom: 2px solid rgba(75, 175, 227, 1);
            position: relative;
            padding-top: 1rem;
        }
        .smart-device-content .company-list{
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
        }
        .smart-device-content .company-list li{
            width: 33.33%;
            margin-bottom: 2rem;
        }
        .c-logo{
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .c-logo img{
            width: 60%;
            height: 5rem;
        }
        .c-content{
            width: 90%;
            margin: 0 auto;
        }
        .c-content h3{
            text-align: center;
            font-size: 1rem;
            margin: 1rem 0;
        }
        .c-content p{
            font-size: 0.8rem;
            line-height: 1.6rem;
            /*height: 10rem;*/
            overflow: hidden;
            margin-bottom: 1rem;
          display: -webkit-box;
          -webkit-line-clamp:3;
          -webkit-box-orient: vertical;
        }
        .detail-btn{
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            text-align: center;
        }
        .detail-btn span{
            display: inline-block;
            width: 40%;
            margin: 0 auto;
            text-align: center;
            background: rgba(75, 175, 227, 1);
            color: #fff;
        }
        .active{
            background: rgba(75, 175, 227, 1);
        }
        .active span{
            color: #fff!important;
        }
        .paginationo-box{
            width: 20%;
            margin: 0 auto;
        }

    }
    @media screen and (max-width: 1000px){
        .banner{
            display: none;
        }
        .zc-content{
            display: none;
        }
        .bread{
            display: none;
        }
        .smart-title{
            margin-top:2rem;
        }
        .smart-device{
            width: 90%;
            margin: 0 auto;
            text-align: left;
            font-size: 1rem;
            overflow: hidden;
        }
        .smart-device span span{
            font-size: 1.5rem;
            display: inline-block;
            position: relative;
            padding-right: 1rem;
            margin-right: 1rem;
            font-weight: 900;
        }
        .smart-device span span:after{
            content: '';
            width: 1px;
            height: 15px;
            background: #666;
            position: absolute;
            right: 0;
            bottom: 7px;
        }
        .nav-company{
            margin: 3rem 0;
            box-shadow: 10px 10px 10px #dedede;
        }
        .nav-company>div{
            width: 100%;
            margin: 0 auto;
            background: #fff;
            padding: 1rem 0;
        }
        .nav-company ul{
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .nav-company ul li{
            width: 5rem;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            margin-top: 1rem;
        }
        .nav-company ul li span{
            width: 80%;
            margin: 0 auto;
            display: inline-block;
            text-align: center;
            border: 1px solid rgba(75, 175, 227, 1);
            color: rgba(75, 175, 227, 1);
            padding: 0 4px;
        }
        .wrap-device-detail{
            background: #fff;
            width: 90%;
            margin: 0 auto;
            border-bottom: 2px solid rgba(75, 175, 227, 1);
            position: relative;
            padding-top: 1rem;
        }
        .smart-device-content .company-list{
        }
        .smart-device-content .company-list li{
            width: 100%;
            margin-bottom: 2rem;
        }
        .c-logo{
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .c-logo img{
            width: 60%;
            height: 5rem;
        }
        .c-content{
            width: 90%;
            margin: 0 auto;
        }
        .c-content h3{
            text-align: center;
            font-size: 1rem;
            margin: 1rem 0;
        }
        .c-content p{
            font-size: 0.8rem;
            line-height: 1.6rem;
            /*height: 10rem;*/
            overflow: hidden;
            margin-bottom: 1rem;
          display: -webkit-box;
          -webkit-line-clamp:3;
          -webkit-box-orient: vertical;
        }
        .detail-btn{
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            text-align: center;
        }
        .detail-btn span{
            display: inline-block;
            width: 40%;
            margin: 0 auto;
            text-align: center;
            background: rgba(75, 175, 227, 1);
            color: #fff;
        }
        .active{
            background: rgba(75, 175, 227, 1);
        }
        .active span{
            color: #fff!important;
        }


    }
    .paginationo-box /deep/ .van-pagination__item--active{
        background: rgba(75, 175, 227, 1)!important;
        color: #fff!important;
    }
    .paginationo-box /deep/ .van-pagination__item{
        color: #333;
    }
</style>