Cjmscon.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <div class="cjmscon">
  3. <div class="cjmscon-btn">
  4. <a><i class="iconfont yj-icon-fengsu"></i>风速&nbsp;8.0m/s</a>
  5. <a><i class="iconfont yj-icon-fengxiang"></i>风向&nbsp;东南风</a>
  6. <a><i class="iconfont yj-icon-jiangyuliang"></i>降雨量&nbsp;10mm</a>
  7. <a><i class="iconfont yj-icon-huoxiandengji"></i>风险等级&nbsp;4</a>
  8. <a><i class="iconfont yj-icon-fengxiantishi"></i>风险&nbsp;1</a>
  9. </div>
  10. <div class="cjmscon-map">
  11. <!--<img src="../assets/images/yj-cjmsimg2.png" />-->
  12. <img :src="mainPicSrc" />
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'Cjmsbtm',
  19. data(){
  20. return {
  21. // mainPicSrc:"../assets/images/yj-cjmsimg2.png",
  22. mainPicSrc:"/img/yj-cjmsimg2.3c5ccc04.png",
  23. // <img data-v-54aa8595="" src="/img/yj-cjmsimg2.3c5ccc04.png">
  24. }
  25. },
  26. created() {
  27. },
  28. mounted () {
  29. },
  30. methods: {
  31. changeMainPic(src){
  32. // alert(src)
  33. // /img/yj-cjmsimg2.3c5ccc04.png
  34. this.mainPicSrc = src;
  35. }
  36. },
  37. }
  38. </script>
  39. <!-- Add "scoped" attribute to limit CSS to this component only -->
  40. <style scoped>
  41. .cjmscon{
  42. position: absolute;
  43. top: 90px;
  44. left: 50%;
  45. transform: translateX(-50%);
  46. z-index: 3;
  47. }
  48. .cjmscon-btn{
  49. display: flex;
  50. flex-direction: row;
  51. justify-content: center;
  52. margin-bottom: 15px;
  53. }
  54. .cjmscon-btn a{
  55. display: flex;
  56. flex-direction: row;
  57. color: #fff;
  58. background: url("../assets/images/yj-cjmsbtnbg3.png") no-repeat center;
  59. width: 189px;
  60. height: 38px;
  61. align-items: center;
  62. font-size: 14px;
  63. }
  64. .cjmscon-btn a:hover{
  65. text-shadow: 0px 0px 5px #00ffff;
  66. }
  67. .cjmscon-btn a i{
  68. margin-left: 20px;
  69. margin-right: 10px;
  70. }
  71. .cjmscon-map{
  72. width: 1100px;
  73. height: 650px;
  74. }
  75. .cjmscon-map img{
  76. width: 100%;
  77. height: 100%;
  78. }
  79. </style>