优化首页样式

src/App.vue

@@ -103,5 +103,8 @@ body.desktop .q-tree__node .q-focus-helper:after{
 .q-checkbox__inner{
   color: rgb(0 0 0 / 72%) !important;
 }
+.q-menu{
+  box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important
+}
 /************************************ 重新Tree样式  END************************************/
 </style>

src/components/navs/hor-big-one.vue

@@ -52,11 +52,9 @@
 .city {
   width: 129px;
   height: 69px;
-  border-radius: 10px;
-  margin: 11px;
-  border: 1px solid #eee;
-  display: inline-block;
-  position: relative;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 0% 0%;
   cursor: pointer;
 }
 .city2 {
@@ -344,7 +342,7 @@ color: #EE4454;
           <span slot="default" class="flex item-center">
             <i class="iconfont icondingweixiao q-icon notranslate" style="font-size: 14px; margin-right: 8px"></i>選擇目的地
           </span>
-          <q-menu ref="address" @mouseenter="addressMenuEnter">
+          <q-menu ref="address" @mouseenter="addressMenuEnter" class="light-shadow">
             <div class="address-box flex">
               <div class="menu-box">
                 <div
@@ -365,34 +363,31 @@ color: #EE4454;
                 </div>
               </div>
               <!-- 热门城市 -->
-              <div v-if="!selectedAreaId" class="city-box">
-                <div v-for="item in selectedArea" :key="item.Id">
-                  <div @click="handleSelectArea(item)" class="city" >
-                    <img class="city-img" v-if="item.ImageList.length" :src="item.ImageList[0]" />
-                    <div class="city-name-box flex flex-center"><div class="city-name">{{item.Name}}</div></div>
-                  </div>
-                  <template v-if="item.SubList">
-                    <div @click="handleSelectArea(item2)" class="city" v-for="item2 in item.SubList" :key="item2.Id">
-                      <div>
-                        <img class="city-img" v-if="item2.ImageList.length" :src="item2.ImageList[0]" />
-                    <div class="city-name-box flex flex-center"><div class="city-name">{{item2.Name}}</div></div>
+              <div class="col bg-grey-2">
+                <div v-if="!selectedAreaId" class="row q-pr-md">
+                  <div @click="handleSelectArea(item)" v-for="item in selectedArea" class="q-mt-md q-ml-md" :key="item.Id"  style="width:130px;height:70px;">
+                    <q-img :src="item.ImageList[0]" spinner-color="grey-2" class="rounded-borders full-width full-height">
+                      <div class="full-width full-height row items-center justify-center" style="background:none;">
+                        <div style="background:rgba(0,0,0,.2);text-shadow: 2px 2px 5px rgb(0 0 0 / 50%);" class="rounded-borders q-px-md q-py-xs text-white cursor-pointer">{{item.Name}}</div>
                       </div>
-                    </div>
-                  </template>
-                </div>
+                    </q-img>
+                  </div>
               </div>
-
               <div v-else class="city-box">
-                
-                <div class="flex" v-for="item in selectedArea" :key="item.Id">
-                  <div @click="handleSelectArea(item)" class="city2" >
-                    {{item.Name}}
+                <div class="row" v-for="item in selectedArea" :key="item.Id">
+                  <div style="width:138px;">
+                    <div @click="handleSelectArea(item)" class="q-py-xs q-px-md bg-grey-4 cursor-pointer text-black text-subtitle2 inline-block rounded-borders text-weight-bolder" >
+                      {{item.Name}}
+                    </div>
                   </div>
-                    <div class="flex flex-wrap" style="width: 500px">
-                      <div @click="handleSelectArea(item2)" class="city3" v-for="item2 in item.SubList" :key="item2.Id">{{item2.Name}}</div>
+                    <div class="col q-mt-sm">
+                      <div class="row q-col-gutter-lg">
+                        <div @click="handleSelectArea(item2)" class="text-subtitle2 text-grey-9 cursor-pointer" v-for="item2 in item.SubList" :key="item2.Id">{{item2.Name}}</div>
+                      </div>
                     </div>
                 </div>
               </div>
+            </div>
 
             </div>
           </q-menu>