【vue】封装的天气展示卡片，在线获取天气信息

源码

<template>
  <div class="sen_weather_wrapper">
    <div class="sen_top_box">
      <div class="sen_left_box">
        <div class="sen_top">
          <div class="sen_city">山东</div>
          <qctc-time class="sen_time_box"></qctc-time>
        </div>
        <div class="sen_bot">
          <div class="sen_current">{{ weatherObj.tempData }}<span>℃</span></div>
          <div class="sen_currentDays">
            <el-image style="width: 1.8rem; height: 1.8rem;margin-right: 5px;"
                      :src="weatherObj.weatherImg" fit="cover"/>
            <div>{{ weatherObj.minTemperature }}℃<span
                style="margin: 0 5px;">~</span>{{ weatherObj.maxTemperature }}℃
            </div>
          </div>
        </div>
      </div>
      <div class="sen_right_box">
        <span>风速：{{ weatherObj.degData }}{{ weatherObj.windspeed }}级</span>
        <span>湿度：{{ weatherObj.humidity }}%</span>
        <span>降水量：{{ weatherObj.rainfall }}毫米</span>
      </div>
    </div>
    <div class="sen_bot_box">
      <div class="list_box" v-for="(item,index) in weatherList">
        <div class="text_box">{{ item.day }}</div>
        <div class="text_box">{{ item.date }}</div>
        <div class="text_box">{{ item.description }}</div>
        <div class="img_box">
          <div class="" v-if="item.description == '晴'">
            <svg version="1.1" id="sunGlobe" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
                 enable-background="new 0 0 100 100" xml:space="preserve">
							<g id="sunrays">
								<radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"/>
                <radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"/>
                <radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"/>
                <radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"/>

                <radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789"
                                gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"/>
                <radialGradient id="XMLID_16_" cx="30.5864" cy="70.2252" r="6.0153"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_9_" fill="url(#XMLID_16_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M29.3,64.3l7.3,6.3c0,0-3.1,5.4-4.8,5.6s-7.4-5-7.3-6.3C24.6,68.6,29.3,64.3,29.3,64.3z"/>
                <radialGradient id="XMLID_44_" cx="21.0871" cy="50" r="4.8093"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_10_" fill="url(#XMLID_44_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M24.8,44.8l0.6,9.6c0,0-6,1.5-7.4,0.5c-1.4-1.1-1.5-8.8-0.6-9.6C18.3,44.4,24.8,44.8,24.8,44.8z"/>
                <radialGradient id="XMLID_45_" cx="29.9614" cy="29.0073" r="6.019"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.3333" style="stop-color:#FBD25A"/>
                  <stop offset="0.7581" style="stop-color:#FAD45D"/>
                  <stop offset="1" style="stop-color:#F5E16E"/>
								</radialGradient>

                <path id="XMLID_11_" fill="url(#XMLID_45_)" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
								M36,28.6L28.7,35c0,0-4.9-3.8-4.9-5.6c0-1.7,6.1-6.6,7.3-6.3C32.4,23.3,36,28.6,36,28.6z"/>
							</g>
              <radialGradient id="XMLID_46_" cx="50" cy="49.1667" r="26.8776"
                              gradientUnits="userSpaceOnUse">
								<stop offset="0.3333" style="stop-color:#E3BF4C"/>
                <stop offset="0.7473" style="stop-color:#F4CE52"/>
                <stop offset="1" style="stop-color:#F5E16E"/>
							</radialGradient>
              <ellipse id="XMLID_1_" fill="url(#XMLID_46_)" stroke="#58595B" stroke-width="0.5"
                       stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3"
                       ry="26.5"/>
						</svg>
          </div>
          <div class="" v-if="item.description == '多云'">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
                 xml:space="preserve">
							<g id="Layer_4">
								<radialGradient id="chubbyMoon_1_" cx="73.25" cy="20.1667" r="71.3092"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.4082" style="stop-color:#D3D0B2"/>
                  <stop offset="0.42" style="stop-color:#C5C4A0"/>
								</radialGradient>
                <ellipse id="chubbyMoon" fill="url(#chubbyMoon_1_)" stroke="#58595B" stroke-width="0.5"
                         stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="61.8" cy="31.2" rx="27.3"
                         ry="26.5"/>
                <radialGradient id="mooncrater_2_" cx="248.5072" cy="171.0079" r="71.3092"
                                gradientTransform="matrix(0.2761 0 0 0.2761 -4.5736 -17.9305)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>
                <ellipse id="mooncrater" fill="url(#mooncrater_2_)" stroke="#58595B" stroke-width="0.5"
                         stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="60.9" cy="32.3" rx="7.5"
                         ry="7.3"/>
                <radialGradient id="mooncrater_4_" cx="328.3989" cy="-40.7337" r="71.3092"
                                gradientTransform="matrix(7.215338e-002 0 0 7.215340e-002 25.6009 15.7241)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>

                <ellipse id="mooncrater_1_" fill="url(#mooncrater_4_)" stroke="#58595B"
                         stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="48.5"
                         cy="13.6" rx="2" ry="1.9"/>
                <radialGradient id="mooncrater_6_" cx="455.6206" cy="33.6355" r="71.3092"
                                gradientTransform="matrix(0.1198 0 0 0.1198 13.506 8.4935)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>
                <ellipse id="mooncrater_3_" fill="url(#mooncrater_6_)" stroke="#58595B"
                         stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="66.7"
                         cy="13.8" rx="3.3" ry="3.2"/>
                <radialGradient id="mooncrater_7_" cx="532.6715" cy="160.4353" r="71.3092"
                                gradientTransform="matrix(0.1405 0 0 0.1405 6.587 5.366)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>
                <ellipse id="mooncrater_5_" fill="url(#mooncrater_7_)" stroke="#58595B"
                         stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="79.8"
                         cy="29.4" rx="3.8" ry="3.7"/>
                <radialGradient id="mooncrater_10_" cx="236.5847" cy="186.8517" r="71.3092"
                                gradientTransform="matrix(0.1712 0 0 0.1712 2.2486 -2.7871)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>
                <ellipse id="mooncrater_8_" fill="url(#mooncrater_10_)" stroke="#58595B"
                         stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="40.8"
                         cy="31.1" rx="4.7" ry="4.5"/>
                <radialGradient id="mooncrater_12_" cx="315.6328" cy="235.365" r="71.3092"
                                gradientTransform="matrix(0.1135 0 0 0.1135 12.8171 17.5574)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>
                <ellipse id="mooncrater_9_" fill="url(#mooncrater_12_)" stroke="#58595B"
                         stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="47.3"
                         cy="45.5" rx="3.1" ry="3"/>
                <radialGradient id="mooncrater_13_" cx="500.9887" cy="293.8005" r="71.3092"
                                gradientTransform="matrix(0.1135 0 0 0.1135 12.8171 17.5574)"
                                gradientUnits="userSpaceOnUse">
									<stop offset="0.385" style="stop-color:#C2B99D"/>
                  <stop offset="0.4082" style="stop-color:#B5AA86"/>
								</radialGradient>
                <ellipse id="mooncrater_11_" fill="url(#mooncrater_13_)" stroke="#58595B"
                         stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="68.4"
                         cy="52.2" rx="3.1" ry="3"/>
							</g>
              <g id="smallcloud">
								<path id="XMLID_3_" fill="#5BCAEB" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="
								M19,39.9c0,0,5.7,1.7,7-1.2c5.4,3,9.1,0.6,11.5,0c0.5,2.3,6.1,1.2,6.1,1.2s10.7-2.6,9.9-11.7c0,0-1.9-12.4-14-10
								c0,0-9.7-9.5-18.6,2.5c0,0-9-0.5-10.3,10C10.6,30.7,10.9,37.8,19,39.9z"/>
							</g>
              <g id="bigCloud">
								<path id="XMLID_9_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002"
                      d="	M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
						c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
							</g>
						</svg>
          </div>
          <div class=""
               v-if="item.description == '小雨' || item.description == '中雨' || item.description == '大雨'">
            <svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
                 enable-background="new 0 0 100 100" xml:space="preserve">
							<g id="rain">
								<path class="raindrop" id="drop1" fill="url(#XMLID_19_)" stroke="#000000"
                      stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="
								M33.8,67.2c0,0-10.4,14.3,0,14.3C44.4,81.5,33.8,67.2,33.8,67.2z"/>
                <path class="raindrop" id="drop2" fill="url(#XMLID_19_)" stroke="#000000"
                      stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="
								M48.2,67c0,0-10.4,14.3,0,14.3C58.8,81.3,48.2,67,48.2,67z"/>
                <linearGradient id="XMLID_19_" gradientUnits="userSpaceOnUse" x1="57.7887" y1="74.1052"
                                x2="67.118" y2="74.1052">
									<stop offset="0.4718" style="stop-color:#5CCAEB"/>
                  <stop offset="0.5339" style="stop-color:#51B1CD"/>
								</linearGradient>
                <path class="raindrop" id="drop3" fill="url(#XMLID_19_)" stroke="#000000"
                      stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="
								M62.4,67c0,0-10.4,14.3,0,14.3C73,81.3,62.4,67,62.4,67z"/>
							</g>
              <g id="bigCloudRain">

								<path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002"
                      d="
								M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
								c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
							</g>
						</svg>
          </div>
          <div class="" v-if="item.description == '阴'">
            <svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
                 enable-background="new 0 0 100 100" xml:space="preserve">
							<g id="bigCloudRain">

								<path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002"
                      d="
								M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
								c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
							</g>
						</svg>
          </div>
          <div class="" v-if="item.description == '雷阵雨'">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
                 xml:space="preserve">
							<g id="thunder">
								<polygon fill="#FAC73F"
                         points="45.6,61.5 39.4,77.6 47.6,77.4 43.1,91.9 44.3,91.9 59.3,73.5 51.4,73.4 58.7,61.5 	"/>
							</g>
              <g id="smallcloud">

								<path id="XMLID_3_" fill="#F4F4F4" stroke="#6D6E71" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="
								M19,39.9c0,0,5.7,1.7,7-1.2c5.4,3,9.1,0.6,11.5,0c0.5,2.3,6.1,1.2,6.1,1.2s10.7-2.6,9.9-11.7c0,0-1.9-12.4-14-10
								c0,0-9.7-9.5-18.6,2.5c0,0-9-0.5-10.3,10C10.6,30.7,10.9,37.8,19,39.9z"/>
							</g>
              <g id="bigClouds">

								<path id="XMLID_16_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002"
                      d="
								M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
								c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
							</g>
						</svg>
          </div>
          <div class=""
               v-if="item.description == '小雪' || item.description == '中雪' || item.description == '大雪'">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
                 xml:space="preserve">
							<g id="snowflakes">
								<g id="flake3">
									<path fill="#5BCAEB" d="M72,78.1c0.6,0.6,0.6,1.6,0,2.2l0,0c-0.6,0.6-1.6,0.6-2.2,0l-8.7-8.7C60.5,71,60.3,70,61,69.3
									s1.7-0.4,2.3,0.2L72,78.1z"/>
                  <path fill="#5BCAEB" d="M63.1,80.3c-0.6,0.6-1.6,0.6-2.2,0l0,0c-0.6-0.6-0.6-1.6,0-2.2l8.7-8.7c0.6-0.6,1.7-0.8,2.3-0.2
									c0.7,0.7,0.4,1.7-0.2,2.3L63.1,80.3z"/>
                  <path fill="#5BCAEB" d="M60.2,76.3c-0.9,0-1.5-0.7-1.5-1.5l0,0c0-0.9,0.7-1.5,1.5-1.5h12.3c0.9,0,1.8,0.6,1.8,1.5
									c0,0.9-0.9,1.5-1.8,1.5H60.2z"/>
                  <path id="XMLID_8_" fill="#5BCAEB" d="M68,81c0,0.9-0.7,1.5-1.5,1.5l0,0c-0.9,0-1.5-0.7-1.5-1.5V68.8c0-0.9,0.6-1.8,1.5-1.8
									c0.9,0,1.5,0.9,1.5,1.8V81z"/>
								</g>
                <g id="flake2">
									<path fill="#5BCAEB" d="M53.5,78.1c0.6,0.6,0.6,1.6,0,2.2l0,0c-0.6,0.6-1.6,0.6-2.2,0l-8.7-8.7C42,71,41.8,70,42.5,69.3
									c0.7-0.7,1.7-0.4,2.3,0.2L53.5,78.1z"/>
                  <path fill="#5BCAEB" d="M44.6,80.3c-0.6,0.6-1.6,0.6-2.2,0l0,0c-0.6-0.6-0.6-1.6,0-2.2l8.7-8.7c0.6-0.6,1.7-0.8,2.3-0.2
									c0.7,0.7,0.4,1.7-0.2,2.3L44.6,80.3z"/>
                  <path fill="#5BCAEB" d="M41.7,76.3c-0.9,0-1.5-0.7-1.5-1.5l0,0c0-0.9,0.7-1.5,1.5-1.5H54c0.9,0,1.8,0.6,1.8,1.5
									c0,0.9-0.9,1.5-1.8,1.5H41.7z"/>
                  <path id="XMLID_17_" fill="#5BCAEB" d="M49.5,81c0,0.9-0.7,1.5-1.5,1.5l0,0c-0.9,0-1.5-0.7-1.5-1.5V68.8c0-0.9,0.6-1.8,1.5-1.8
									c0.9,0,1.5,0.9,1.5,1.8V81z"/>
								</g>
                <g id="flake1">
									<path fill="#5BCAEB" d="M35.1,78.1c0.6,0.6,0.6,1.6,0,2.2l0,0c-0.6,0.6-1.6,0.6-2.2,0l-8.7-8.7c-0.6-0.6-0.8-1.7-0.2-2.3
									c0.7-0.7,1.7-0.4,2.3,0.2L35.1,78.1z"/>
                  <path fill="#5BCAEB" d="M26.3,80.3c-0.6,0.6-1.6,0.6-2.2,0l0,0c-0.6-0.6-0.6-1.6,0-2.2l8.7-8.7c0.6-0.6,1.7-0.8,2.3-0.2
									c0.7,0.7,0.4,1.7-0.2,2.3L26.3,80.3z"/>
                  <path fill="#5BCAEB" d="M23.4,76.3c-0.9,0-1.5-0.7-1.5-1.5l0,0c0-0.9,0.7-1.5,1.5-1.5h12.3c0.9,0,1.8,0.6,1.8,1.5
									c0,0.9-0.9,1.5-1.8,1.5H23.4z"/>
                  <path fill="#5BCAEB" d="M31.1,81c0,0.9-0.7,1.5-1.5,1.5l0,0c-0.9,0-1.5-0.7-1.5-1.5V68.8c0-0.9,0.6-1.8,1.5-1.8s1.5,0.9,1.5,1.8
									V81z"/>
								</g>
							</g>
              <g id="bigCloudSnow">

								<path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5"
                      stroke-miterlimit="10" stroke-opacity="8.000000e-002"
                      d="
								M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
								c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
							</g>
						</svg>
          </div>
          <!-- <el-image style="width: 3rem; height: 3rem;":src="item.weatherImg" fit="cover" /> -->
        </div>
        <div class="text_box1">{{ item.minTemperature }}℃<span
            style="margin: 0 5px;">~</span>{{ item.maxTemperature }}℃
        </div>
      </div>
      <div class="chart_box">
        <q-charts :option="weatherOption"></q-charts>
      </div>
    </div>
  </div>
</template>

资料包：https://download.csdn.net/download/galaxyJING/89331774

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/655222.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

民国漫画杂志《时代漫画》第30期.PDF

民国漫画杂志《时代漫画》第30期.PDF

时代漫画30.PDF: https://url03.ctfile.com/f/1779803-1248635414-87c8c8?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!
阅读更多...
专业渗透测试 Phpsploit-Framework（PSF）框架软件小白入门教程（九）

专业渗透测试 Phpsploit-Framework（PSF）框架软件小白入门教程（九）

本系列课程&#xff0c;将重点讲解Phpsploit-Framework框架软件的基础使用&#xff01; 本文章仅提供学习&#xff0c;切勿将其用于不法手段&#xff01; 继续接上一篇文章内容&#xff0c;讲述如何进行Phpsploit-Framework软件的基础使用和二次开发。 现在&#xff0c;我们…
阅读更多...
Flink 通过 paimon 关联维表，内存降为原来的1/4

Flink 通过 paimon 关联维表，内存降为原来的1/4

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…
阅读更多...
如何破解navicat16

如何破解navicat16

先安装好没破解的navicat16 以管理员身份运行 ‘无限试用Navicat.bat’ 复制这个 点击属性 打开文件所属位置 把复制的文件粘贴进去 直接启动navicat16
阅读更多...
常用批处理命令及批处理文件编写技巧

常用批处理命令及批处理文件编写技巧

一常用批处理命令 1.查看命令用法&#xff1a;命令 /? //如&#xff1a;cd /? 2.切换盘符目录&#xff1a;cd /d D:\test 或直接输入 d: //进入上次d盘所在的目录 3.切换目录&#xff1a;cd test 4.清屏:cls 5.“arp -a” //它会列出当前设备缓存中的所有…
阅读更多...
Golang项目代码组织架构实践

Golang项目代码组织架构实践

Golang在项目结构上没有强制性规范&#xff0c;虽然这给了开发者很大的自由度&#xff0c;但也需要自己沉淀一套可行的架构。本文介绍了一种项目布局&#xff0c;可以以此为参考设计适合自己的 Golang 项目组织模式。原文: Golang Project Layout Go 有很多强制的或是约定俗成的…
阅读更多...
【Mac】Ulysses for Mac（优秀的markdown写作软件） v34.3中文版安装教程

【Mac】Ulysses for Mac（优秀的markdown写作软件） v34.3中文版安装教程

软件介绍 哪款markdown写作软件最好用&#xff1f;小编推荐您使用尤利西斯&#xff1a;Ulysses mac版&#xff01;这是mac上一款优秀的markdown写作工具。Ulysses mac版具备全新的Soulmen写作坏境&#xff0c;采用了革命性的功能增强&#xff0c;结合了最好的部分最小标记&…
阅读更多...
60. UE5 RPG 使用场景查询系统（EQS，Environment Query System）实现远程敌人寻找攻击位置

60. UE5 RPG 使用场景查询系统（EQS，Environment Query System）实现远程敌人寻找攻击位置

UE的Environment Query System&#xff08;EQS&#xff09;是环境查询系统&#xff0c;它是UE4和UE5中用于AI决策制定过程中的数据采集和处理的一个强大工具。EQS可以收集场景中相关的数据&#xff0c;利用生成器&#xff08;Generator&#xff09;针对用户的测试&#xff08;T…
阅读更多...
mysql 按区间统计 3 分钟维度

mysql 按区间统计 3 分钟维度

根据 UNIX_TIMESTAMP 去掉分钟后的的位数 思路如下select UNIX_TIMESTAMP(now()) 当前时间 秒,now() 当前时间,FROM_UNIXTIME(FLOOR(UNIX_TIMESTAMP(CURRENT_TIMESTAMP) / (3 * 60)) * (3 * 60)) 3分钟为分隔去掉多余位数当前时间 秒 当前时间 3分钟为分隔去掉多余…
阅读更多...
【NumPy】全面解析NumPy的where函数：高效条件操作指南

【NumPy】全面解析NumPy的where函数：高效条件操作指南

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…
阅读更多...
哈希冲突的常见解决方法【附C++代码】

哈希冲突的常见解决方法【附C++代码】

在C中&#xff0c;哈希表是一种常用的数据结构&#xff0c;用于实现快速的插入、删除和查找操作。 哈希表的核心在于哈希函数&#xff0c;它将输入的关键字转换为一个数组索引。然而&#xff0c;不同的关键字可能映射到相同的索引&#xff0c;这种情况称为哈希冲突。 有效地解…
阅读更多...
k8s中的集群调度

k8s中的集群调度

文章目录 k8s中的集群调度Pod 创建流程 通过指定节点来创建pod所在的node节点通过标签来指定pod创建在哪个节点上pod 的亲和性Pod的亲和性和反亲和性亲和性&#xff08;Affinity&#xff09;反亲和性&#xff08;Anti-Affinity&#xff09; 污点与容忍污点&#xff08;Taint&am…
阅读更多...
2024年，史上最强的数据库资料集合

2024年，史上最强的数据库资料集合

&#x1f4a8;&#x1f3f9;&#x1f300; 2024年&#xff0c;史上最强的数据库资料集合 N种数据库的全方位整理&#xff1a; mysql&#xff0c;mariaDB&#xff0c;Percona Server&#xff0c;Redis&#xff0c;RocksDB&#xff0c;Cassandra&#xff0c;CouchDB&#xff0c…
阅读更多...
【LeeCode算法】第67题：二进制求和

【LeeCode算法】第67题：二进制求和

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;将a和b两个字符串转换成十进制&#xff0c;然后将相加的结果转换回文本的二进制。 2. 代码&#xff1a; char* addBinary(char* a, char* b) {int a_len strlen(a);i…
阅读更多...
保障餐饮场所安全：可燃气体报警器专业检测的必要性

保障餐饮场所安全：可燃气体报警器专业检测的必要性

在餐饮行业&#xff0c;火灾隐患一直是备受关注的问题。为了有效预防和及时发现可燃气体泄漏&#xff0c;可燃气体报警器的专业检测周期显得尤为重要。 今天&#xff0c;佰德和大家一起来深入了解一下可燃气体报警器的专业检测周期&#xff0c;若您对此有不同的观点或其他的问…
阅读更多...
鸿蒙ArkUI-X跨语言调用说明：【平台桥接开发指南（Android）BridgePlugin】

鸿蒙ArkUI-X跨语言调用说明：【平台桥接开发指南（Android）BridgePlugin】

BridgePlugin (平台桥接) 本模块提供ArkUI端和Android平台端消息通信的功能&#xff0c;包括数据传输、方法调用和事件调用。需配套ArkUI端API使用&#xff0c;ArkUI侧具体用法请参考[Bridge API]。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-…
阅读更多...
OSPF优化——OSPF减少LSA更新量2

OSPF优化——OSPF减少LSA更新量2

二、特殊区域——优化非骨干区域的LSA数量 不是骨干区域、不能存在虚链路 1、不能存在 ASBR 1&#xff09;末梢区域 该区域将拒绝 4、5LSA的进人&#xff0c;同时由该区域连接骨干0区域的ABR 向该区域&#xff0c;发布一条3类的缺省路由; 该区域内每台路由器均需配置&#xf…
阅读更多...
1---Linux下进程的概念(逻辑推导，全干货无废话)

1---Linux下进程的概念(逻辑推导，全干货无废话)

一、进程和程序&#xff1a; 1.1什么是程序&#xff1f; 程序由代码、数据、逻辑、接口和文档组成的一组按特定顺序执行的计算机指令&#xff0c;用于实现特定功能或解决问题。程序存储在磁盘上。 1.2什么是进程&#xff1f; 进程是一个正在执行的程序实例&#xff0c;包含程…
阅读更多...
LLM提示工程的技巧

LLM提示工程的技巧

1. 从简单开始&#xff08;Start Simple&#xff09; 避免在一开始就增加太多的复杂性。 从简单的提示开始&#xff0c;然后在后续提示中添加更多信息和上下文。 这样&#xff0c;提示就是一个迭代过程&#xff0c;提示在此过程中进一步发展。 从简单的开始&#xff0c;就有足…
阅读更多...
Matplotlib绘图指南：从基础绘图到多子图展示

Matplotlib绘图指南：从基础绘图到多子图展示

目录 前言 导入模块 第一点&#xff1a;绘制图像 第二点&#xff1a;保存图像 第三点&#xff1a;多图形的绘制 第四点&#xff1a;绘制多子图 总结 前言 在数据可视化中&#xff0c;Matplotlib是一款强大的Python库&#xff0c;提供了丰富的功能来绘制各种类型的图表。…
阅读更多...
最新文章

Copyright @ 2022~2023