dev/dcp-web-gate/src_old/views/countryInformation/countryBasicInformation.vue

<template>
    <div class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'countryInformation' }">国别信息</el-breadcrumb-item>
                    <el-breadcrumb-item>基本信息</el-breadcrumb-item>
                    </el-breadcrumb>
            </div>
             <div style="width: 100%;margin-top: 30px;">
                <div class="enterprise_style">
                    <span class="enterprise_style_span">基本信息</span>
                </div>
                <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
                    <img :src="getIconUrl(enterprise.label1.src)" alt=""  class="left"  width="400px">
                    {{enterprise.label1.label}}
                </p>
             </div>
             <div style="width: 100%;">
                <div class="enterprise_style">
                    <span class="enterprise_style_span">政治经济概况</span>
                </div>       
                <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
                    <img :src="getIconUrl(enterprise.label1.src)" alt=""  class="right"  width="400px">
                    {{enterprise.label1.label}}
                </p>
             </div>
             <div style="width: 100%;">
                <div class="enterprise_style">
                    <span class="enterprise_style_span">气候变化及环境治理</span>
                </div>       
                <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
                    <img :src="getIconUrl(enterprise.label1.src)" alt=""  class="right"  width="400px">
                    {{enterprise.label1.label}}
                </p>
             </div>
             <div style="width: 100%;">
                <div class="enterprise_style">
                    <span class="enterprise_style_span">人口情况</span>
                </div>       
                <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
                    <!-- <img :src="getIconUrl(enterprise.label1.src)" alt=""  class="right"  width="400px"> -->
                    {{enterprise.label1.label}}
                </p>
             </div>
             <div style="width: 100%;">
                <div class="enterprise_style">
                    <span class="enterprise_style_span">宗教信仰</span>
                </div>       
                <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
                    <img :src="getIconUrl(enterprise.label1.src)" alt=""  class="right"  width="400px">
                    {{enterprise.label1.label}}
                </p>
             </div>
    </div>
  </template>
  
  <script>
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  export default {
    name: 'countryBasicInformation',
    data () {
      return {
        enterpriseDetails:'',
        informationsClass:'1',
        enterprise:{
            label1:{
                label:'经营范围包括三峡工程建设和经营管理，住宿经营的管理；长江中上游水资源开发；水利水电技术服务；水利水电工程所需物资、设备的销售（国家有专营专项的除外）；与上述业务有关的咨询服务；经营或代理公司所属企业自产产品（国家组织统一联合经营的16种出口商品除外）的出口业务；经营或代理公司及所属产业所需设备和材料（国家指定公司经营的12种进口商品除外）的进口业务；经营或代理技术进出口业务；承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。（企依法自主选择经营项目，开展经营活动；依法需批准的项目；经相关部门批准后依批准的内容开展经营活动；不得从事本市产业政策禁止和限制类的经营活动。经营范围包括三峡工程建设和经营管理，住宿经营的管理；长江中上游水资源开发；水利水电技术服务；水利水电工程所需物资、设备的销售（国家有专营专项的除外）；与上述业务有关的咨询服务；经营或代理公司所属企业自产产品（国家组织统一联合经营的16种出口商品除外）的出口业务；经营或代理公司及所属产业所需设备和材料（国家指定公司经营的12种进口商品除外）的进口业务；经营或代理技术进出口业务；承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。（企依法自主选择经营项目，开展经营活动；依法需批准的项目；经相关部门批准后依批准的内容开展经营活动；不得从事本市产业政策禁止和限制类的经营活动。',
                src:'u6668.png',
            },
        },
        recommend:[{
            img:'u6029.png',
            num:'2934'
        },{
            img:'u6029.png',
            num:'2934'
        },{
            img:'u6029.png',
            num:'2934'
        },{
            img:'u6029.png',
            num:'2934'
        },{
            img:'u6029.png',
            num:'2934'
        }],
        }
    },
    created(){
        this.enterpriseDetails=this.$route.params.key
    },
    mounted(){
        this.Swiper()
    },
    methods:{
     Swiper(){ 
        var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
        });
     },
     getIconUrl(url){
       return require("@/assets/img/realTimeInfo/"+url);
     },
     toView(router,json){
        this.$router.push({name:router,params:json})
      },
      screenBack(data){
          console.log(data,'screenBackscreenBackscreenBackscreenBack')
      },
      screen(i){
        this.index=i
      },
      getInformation(num){
                this.informationsClass=num
    },
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
  .swipers {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 460px;
    height: 390px;
  }
  .details {
    position: absolute;
    top: 30px;
    left: 600px;
    width: 460px;
    height: 390px; 
  }
  .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 80%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
    .initData_label {
    color: #6c8c9d;
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
   }
   .enterprise_style{
     line-height: 40px;
     color: #6C819D;
     /* padding-left: 100px; */
     font-size: 18px;
     /* font-weight: 700; */
     margin-top: 5px;
     margin-left: 20px;
     border-bottom: 1px solid #95d13e;
   }
   .enterprise_style_span {
        padding: 10px;
       text-align: center;
       height: 100%;
       background: #95d13e;
       color: #fff;
       /* border-bottom: 2px solid #6699ff; */
   }
   .enterprise_style_product tr {
       line-height: 30px;
       width: 100%;
       display: inline-block;
       border-bottom: 1px dashed #ccc;
       font-size: 14px;
       color: #6C819D;
       margin-bottom: 5px;
   }
   .recommend {
       margin-top:15px;
       margin-left: 100px;
   }
   .recommend li{
        display: inline-block;
        width: 170px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
   }
   .information1 {
        display: inline-block;
        width: 123px;
        height: 100%;
        border:1px solid rgba(228, 228, 228, 1);
        text-align: center;
        background: #f9f9f9;
        color: #999;
    }
    .information2 {
        display: inline-block;
        width: 123px;
        height: 100%;
        border-top:3px solid #2c5589;
        text-align: center;
        color: #2c5589;
    }
    .information1:hover {
        color: #FF0036;
    }
    img.right {
    float: right;
    }
    img.left {
    float: left;
    }
</style>