fix climate problem

src/components/main/main.vue

@@ -24,8 +24,11 @@
             <div :class="$style.bottom">
                 <div :class="$style.tittle">#每日一图#</div>
                 <div :class="$style.des">
-                    <div :class="$style.climate_img"><img v-bind:src="pic.climate_url" alt="climate icon" :class = "$style.climate_icon"></div>
-                    <div :class="$style.description">{{pic.climate}} · </div>
+                    <div :class="$style.climate_img">
+                        <svg viewBox="0 0 200 200" :class="$style.climate_icon">    <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="climate_pic"></use>
+                        </svg>
+                    </div>
+                    <div :class="$style.description">{{word}} · </div>
                     <div :class="$style.date">{{pic.date}}</div>
                 </div>
             </div>
@@ -48,6 +51,8 @@ export default {
     mounted() {
             FETCH.FetchData('/api/v1.0/everydaypic/','GET').then(value => {
                 this.pic = value
+                this.climate_pic = value.climate == 1 ? "#sunny" : value.climate == 2 ? "#cloudy" : "#rain"
+                this.word = value.climate == 1 ? "晴天" : value.climate == 2 ? "阴天" : "小雨"
             })
             FETCH.FetchData('/api/v1.0/tea/','GET').then(value => {
                 this.topic = value
@@ -61,7 +66,9 @@ export default {
                 onShow: true,
                 showTopic: false,
                 topic:{},
-                topicUrl:""
+                topicUrl:"",
+                word:"晴天",
+                climate_pic: "#cloudy"
             }
         }
 }
@@ -186,9 +193,11 @@ export default {
 
 .climate_icon{   
     width: 15px;
+    fill: $white;
 }
 
 .description {
+    margin-right: 6px;
     composes: common;
 }
 

template/header.html

@@ -1,4 +1,41 @@
 <svg style="display: none">
+    <symbol viewBox="0 0 160 133.33" id="rain">
+        <path class="cls-1" d="M64.76,116.69c0,9.19,7.89,16.65,17.63,16.65S100,125.87,100,116.69c0,0-.68-16.87-17.64-32.88-16.95,16-17.63,32.88-17.63,32.88Z" />
+        <path class="cls-1" d="M137.73,45.17a44.11,44.11,0,0,0,.35-4.7,40.1,40.1,0,0,0-74.4-21.14,27,27,0,0,0-15.25-4.68A27.56,27.56,0,0,0,21.54,47,33.09,33.09,0,0,0,0,78.21c0,18,14.18,31.63,33,31.63A3.93,3.93,0,0,0,33,102C18.62,102,7.8,91.77,7.8,78.21a25.24,25.24,0,0,1,19.34-24.7,3.91,3.91,0,0,0,2.51-1.92,4,4,0,0,0,.28-3.16A19.7,19.7,0,0,1,48.43,22.5a19.32,19.32,0,0,1,13.72,5.68A3.89,3.89,0,0,0,68.45,27a32.32,32.32,0,0,1,61.84,13.46,61.33,61.33,0,0,1-.73,6.91,4.19,4.19,0,0,0-.05.64,3.92,3.92,0,0,0,3.25,3.87A25.41,25.41,0,0,1,127,102a3.93,3.93,0,0,0,0,7.86,33.28,33.28,0,0,0,10.72-64.68Z" />
+    </symbol>
+    <symbol viewBox="0 0 151.9 98.1" id="cloudy">
+        <g>
+            <path class="st0" d="M123.4,89.4c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4c12,0,21.7-9.7,21.7-21.7s-9.7-21.7-21.7-21.7h-3.1
+        c-1.9,0-3.4-1.5-3.4-3.4v-3.1c0-14.2-11.6-25.8-25.8-25.8c-4.3,0-8.6,1.1-12.4,3.2c-1.6,0.9-3.7,0.3-4.6-1.4
+        C73.2,7,73.8,4.9,75.5,4c4.8-2.6,10.2-4,15.6-4c17.9,0,32.4,14.5,32.6,32.3c15.6,0.2,28.2,12.9,28.2,28.5
+        C151.9,76.6,139.1,89.4,123.4,89.4L123.4,89.4z" />
+            <path class="st0" d="M93.1,98.1H28.5C12.8,98.1,0,85.3,0,69.6C0,54,12.6,41.2,28.2,41.1C28.4,23.2,43,8.7,60.8,8.7
+        S93.2,23.2,93.4,41c15.6,0.2,28.2,12.9,28.2,28.5C121.7,85.3,108.9,98.1,93.1,98.1L93.1,98.1z M28.5,47.9c-12,0-21.7,9.7-21.7,21.7
+        s9.7,21.7,21.7,21.7h64.6c12,0,21.7-9.7,21.7-21.7s-9.7-21.7-21.7-21.7H90c-1.9,0-3.4-1.5-3.4-3.4v-3.1c0-14.2-11.6-25.8-25.8-25.8
+        C46.6,15.6,35,27.1,35,41.4v3.1c0,1.9-1.5,3.4-3.4,3.4H28.5L28.5,47.9z" />
+        </g>
+    </symbol>
+    <symbol viewBox="0 0 149.9 149.9" id="sunny">
+        <g>
+            <path class="st0" d="M75,116.5C52,116.5,33.4,97.9,33.4,75S52,33.4,75,33.4S116.5,52,116.5,75S97.9,116.5,75,116.5z M75,40.4
+        c-19.1,0-34.6,15.5-34.6,34.6s15.5,34.6,34.6,34.6S109.6,94,109.6,75S94,40.4,75,40.4z" />
+            <path class="st0" d="M37.2,40.7c-0.9,0-1.8-0.3-2.5-1L22,26.9c-1.4-1.4-1.4-3.6,0-4.9c1.4-1.4,3.6-1.4,4.9,0l12.8,12.8
+        c1.4,1.4,1.4,3.6,0,4.9C39,40.4,38.1,40.7,37.2,40.7z" />
+            <path class="st0" d="M125.5,129c-0.9,0-1.8-0.3-2.5-1l-12.8-12.8c-1.4-1.4-1.4-3.6,0-4.9c1.4-1.4,3.6-1.4,4.9,0L128,123
+        c1.4,1.4,1.4,3.6,0,4.9C127.3,128.7,126.4,129,125.5,129z" />
+            <path class="st0" d="M112.7,40.7c-0.9,0-1.8-0.3-2.5-1c-1.4-1.4-1.4-3.6,0-4.9L123,22c1.4-1.4,3.6-1.4,4.9,0s1.4,3.6,0,4.9
+        l-12.8,12.8C114.5,40.4,113.6,40.7,112.7,40.7z" />
+            <path class="st0" d="M24.4,129c-0.9,0-1.8-0.3-2.5-1c-1.4-1.4-1.4-3.6,0-4.9l12.8-12.8c1.4-1.4,3.6-1.4,4.9,0
+        c1.4,1.4,1.4,3.6,0,4.9L26.9,128C26.2,128.7,25.3,129,24.4,129z" />
+            <path class="st0" d="M21.6,78.5H3.5C1.6,78.5,0,76.9,0,75c0-1.9,1.6-3.5,3.5-3.5h18.1c1.9,0,3.5,1.6,3.5,3.5
+        C25.1,76.9,23.6,78.5,21.6,78.5z" />
+            <path class="st0" d="M146.4,78.5h-18.1c-1.9,0-3.5-1.6-3.5-3.5c0-1.9,1.6-3.5,3.5-3.5h18.1c1.9,0,3.5,1.6,3.5,3.5
+        C149.9,76.9,148.4,78.5,146.4,78.5z" />
+            <path class="st0" d="M75,25.1c-1.9,0-3.5-1.6-3.5-3.5V3.5C71.5,1.6,73,0,75,0s3.5,1.6,3.5,3.5v18.1C78.5,23.6,76.9,25.1,75,25.1z" />
+            <path class="st0" d="M75,149.9c-1.9,0-3.5-1.6-3.5-3.5v-18.1c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5v18.1
+        C78.5,148.4,76.9,149.9,75,149.9z" />
+        </g>
+    </symbol>
     <symbol viewBox="0 0 160.2 168.5" id="recommend">
         <path class="st0" d="M155.2,83.4c-2.8,0-5,2.2-5,5c0,18.7-7.3,36.3-20.5,49.6c-13.2,13.2-30.8,20.5-49.6,20.5s-36.3-7.3-49.6-20.5
     C17.3,124.7,10,107.1,10,88.4s7.3-36.3,20.5-49.6s30.8-20.5,49.6-20.5c14.4,0,28.3,4.4,39.9,12.5l-14.9,5.3c-2.6,0.9-4,3.8-3,6.4
@@ -73,7 +110,7 @@
     c2.2,1.2,4.5,1.8,6.9,1.8c2.9,0,5.8-0.9,8.2-2.7c4.5-3.2,6.7-8.7,5.9-14.2l-8.8-54.5l38-39.3c3.7-3.9,5-9.6,3.3-14.7
     c-1.7-5.2-6.1-8.9-11.4-9.8l-51.5-8L112.9,8.4C110.6,3.3,105.5,0,100,0L100,0L100,0z" />
     </symbol>
-    <symbol viewBox="0 0 138.7 138.7" id="find" >
+    <symbol viewBox="0 0 138.7 138.7" id="find">
         <path class="st0" d="M138.2,136.4l-1.8,1.8c-1,1-3.3,0.3-5.1-1.6l-35.9-35.9l0,0L90,95.3c0-0.1,0-0.2,0.1-0.3l1-0.5
     c10.1-9.1,16.5-22.3,16.5-37c0-27.6-22.4-50-50-50s-50,22.4-50,50s22.4,50,50,50c5.6,0,11-1,16-2.7l3,6.9c-6,2.1-12.4,3.3-19.1,3.3
     C25.8,115,0,89.3,0,57.5C0,25.8,25.7,0,57.5,0C89.2,0,115,25.7,115,57.5c0,14.5-5.4,27.7-14.3,37.9l35.9,35.9