countryBasicInformation.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <div class="autoBox box">
  3. <div class="crumbs">
  4. <el-breadcrumb separator="/">
  5. <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
  6. <el-breadcrumb-item :to="{ path: 'countryInformation' }">国别信息</el-breadcrumb-item>
  7. <el-breadcrumb-item>基本信息</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. </div>
  10. <div style="width: 100%;margin-top: 30px;">
  11. <div class="enterprise_style">
  12. <span class="enterprise_style_span">基本信息</span>
  13. </div>
  14. <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
  15. <img :src="getIconUrl(enterprise.label1.src)" alt="" class="left" width="400px">
  16. {{enterprise.label1.label}}
  17. </p>
  18. </div>
  19. <div style="width: 100%;">
  20. <div class="enterprise_style">
  21. <span class="enterprise_style_span">政治经济概况</span>
  22. </div>
  23. <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
  24. <img :src="getIconUrl(enterprise.label1.src)" alt="" class="right" width="400px">
  25. {{enterprise.label1.label}}
  26. </p>
  27. </div>
  28. <div style="width: 100%;">
  29. <div class="enterprise_style">
  30. <span class="enterprise_style_span">气候变化及环境治理</span>
  31. </div>
  32. <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
  33. <img :src="getIconUrl(enterprise.label1.src)" alt="" class="right" width="400px">
  34. {{enterprise.label1.label}}
  35. </p>
  36. </div>
  37. <div style="width: 100%;">
  38. <div class="enterprise_style">
  39. <span class="enterprise_style_span">人口情况</span>
  40. </div>
  41. <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
  42. <!-- <img :src="getIconUrl(enterprise.label1.src)" alt="" class="right" width="400px"> -->
  43. {{enterprise.label1.label}}
  44. </p>
  45. </div>
  46. <div style="width: 100%;">
  47. <div class="enterprise_style">
  48. <span class="enterprise_style_span">宗教信仰</span>
  49. </div>
  50. <p style="margin-top: 15px;color: #8FB2C8;margin-left: 30px;margin-right: 30px;">
  51. <img :src="getIconUrl(enterprise.label1.src)" alt="" class="right" width="400px">
  52. {{enterprise.label1.label}}
  53. </p>
  54. </div>
  55. </div>
  56. </template>
  57. <script>
  58. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  59. import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  60. export default {
  61. name: 'countryBasicInformation',
  62. data () {
  63. return {
  64. enterpriseDetails:'',
  65. informationsClass:'1',
  66. enterprise:{
  67. label1:{
  68. label:'经营范围包括三峡工程建设和经营管理,住宿经营的管理;长江中上游水资源开发;水利水电技术服务;水利水电工程所需物资、设备的销售(国家有专营专项的除外);与上述业务有关的咨询服务;经营或代理公司所属企业自产产品(国家组织统一联合经营的16种出口商品除外)的出口业务;经营或代理公司及所属产业所需设备和材料(国家指定公司经营的12种进口商品除外)的进口业务;经营或代理技术进出口业务;承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。(企依法自主选择经营项目,开展经营活动;依法需批准的项目;经相关部门批准后依批准的内容开展经营活动;不得从事本市产业政策禁止和限制类的经营活动。经营范围包括三峡工程建设和经营管理,住宿经营的管理;长江中上游水资源开发;水利水电技术服务;水利水电工程所需物资、设备的销售(国家有专营专项的除外);与上述业务有关的咨询服务;经营或代理公司所属企业自产产品(国家组织统一联合经营的16种出口商品除外)的出口业务;经营或代理公司及所属产业所需设备和材料(国家指定公司经营的12种进口商品除外)的进口业务;经营或代理技术进出口业务;承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。(企依法自主选择经营项目,开展经营活动;依法需批准的项目;经相关部门批准后依批准的内容开展经营活动;不得从事本市产业政策禁止和限制类的经营活动。',
  69. src:'u6668.png',
  70. },
  71. },
  72. recommend:[{
  73. img:'u6029.png',
  74. num:'2934'
  75. },{
  76. img:'u6029.png',
  77. num:'2934'
  78. },{
  79. img:'u6029.png',
  80. num:'2934'
  81. },{
  82. img:'u6029.png',
  83. num:'2934'
  84. },{
  85. img:'u6029.png',
  86. num:'2934'
  87. }],
  88. }
  89. },
  90. created(){
  91. this.enterpriseDetails=this.$route.params.key
  92. },
  93. mounted(){
  94. this.Swiper()
  95. },
  96. methods:{
  97. Swiper(){
  98. var galleryThumbs = new Swiper('.gallery-thumbs', {
  99. spaceBetween: 10,
  100. slidesPerView: 4,
  101. freeMode: true,
  102. watchSlidesVisibility: true,
  103. watchSlidesProgress: true,
  104. });
  105. var galleryTop = new Swiper('.gallery-top', {
  106. spaceBetween: 10,
  107. navigation: {
  108. nextEl: '.swiper-button-next',
  109. prevEl: '.swiper-button-prev',
  110. },
  111. thumbs: {
  112. swiper: galleryThumbs
  113. }
  114. });
  115. },
  116. getIconUrl(url){
  117. return require("@/assets/img/realTimeInfo/"+url);
  118. },
  119. toView(router,json){
  120. this.$router.push({name:router,params:json})
  121. },
  122. screenBack(data){
  123. console.log(data,'screenBackscreenBackscreenBackscreenBack')
  124. },
  125. screen(i){
  126. this.index=i
  127. },
  128. getInformation(num){
  129. this.informationsClass=num
  130. },
  131. }
  132. }
  133. </script>
  134. <!-- Add "scoped" attribute to limit CSS to this component only -->
  135. <style scoped>
  136. .box {
  137. margin-top: 10px;
  138. background: #fff;
  139. /* height: 500px; */
  140. padding: 20px 0;
  141. }
  142. .crumbs {
  143. margin-left: 20px;
  144. }
  145. body {
  146. margin: 0;
  147. }
  148. .swipers {
  149. position: absolute;
  150. top: 30px;
  151. left: 100px;
  152. width: 460px;
  153. height: 390px;
  154. }
  155. .details {
  156. position: absolute;
  157. top: 30px;
  158. left: 600px;
  159. width: 460px;
  160. height: 390px;
  161. }
  162. .swiper-container {
  163. width: 100%;
  164. height: 300px;
  165. margin-left: auto;
  166. margin-right: auto;
  167. }
  168. .swiper-slide {
  169. background-size: cover;
  170. background-position: center;
  171. }
  172. .gallery-top {
  173. height: 80%;
  174. width: 100%;
  175. }
  176. .gallery-thumbs {
  177. height: 20%;
  178. box-sizing: border-box;
  179. padding: 10px 0;
  180. }
  181. .gallery-thumbs .swiper-slide {
  182. width: 25%;
  183. height: 100%;
  184. opacity: 0.4;
  185. }
  186. .gallery-thumbs .swiper-slide-thumb-active {
  187. opacity: 1;
  188. }
  189. .initData_label {
  190. color: #6c8c9d;
  191. font-weight: 700;
  192. font-size: 18px;
  193. line-height: 42px;
  194. }
  195. .enterprise_style{
  196. line-height: 40px;
  197. color: #6C819D;
  198. /* padding-left: 100px; */
  199. font-size: 18px;
  200. /* font-weight: 700; */
  201. margin-top: 5px;
  202. margin-left: 20px;
  203. border-bottom: 1px solid #95d13e;
  204. }
  205. .enterprise_style_span {
  206. padding: 10px;
  207. text-align: center;
  208. height: 100%;
  209. background: #95d13e;
  210. color: #fff;
  211. /* border-bottom: 2px solid #6699ff; */
  212. }
  213. .enterprise_style_product tr {
  214. line-height: 30px;
  215. width: 100%;
  216. display: inline-block;
  217. border-bottom: 1px dashed #ccc;
  218. font-size: 14px;
  219. color: #6C819D;
  220. margin-bottom: 5px;
  221. }
  222. .recommend {
  223. margin-top:15px;
  224. margin-left: 100px;
  225. }
  226. .recommend li{
  227. display: inline-block;
  228. width: 170px;
  229. /* height: 130px; */
  230. text-align: center;
  231. margin-right: 15px;
  232. }
  233. .information1 {
  234. display: inline-block;
  235. width: 123px;
  236. height: 100%;
  237. border:1px solid rgba(228, 228, 228, 1);
  238. text-align: center;
  239. background: #f9f9f9;
  240. color: #999;
  241. }
  242. .information2 {
  243. display: inline-block;
  244. width: 123px;
  245. height: 100%;
  246. border-top:3px solid #2c5589;
  247. text-align: center;
  248. color: #2c5589;
  249. }
  250. .information1:hover {
  251. color: #FF0036;
  252. }
  253. img.right {
  254. float: right;
  255. }
  256. img.left {
  257. float: left;
  258. }
  259. </style>