123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <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>
-
|