Merge pull request #347 from oustr/main

refactor: 完善喵详情顶部部分样式

comments

@@ -1,3 +1,10 @@
+代码规范：
+
+长宽单位统一用vw（高度上的也是vw，字号也是，都以屏幕宽度为准），不用rpx（不是原生的，经常容易标红报错）
+<image mode="aspectFill"/> 用aspectFill可以使得在长宽固定的情况下 图片居中且填满整个长宽 多余的会被隐藏起来 不会让图片变形
+
+
+
 uni.setStorageSync(KEY,DATA)
 uni.getStorageSync(KEY)
 

src/pages/cat/cat.vue

@@ -1,21 +1,12 @@
 <template>
   <view v-if="!isRefreshing">
-    <!--    <image-->
-    <!--      :src="mainImgUrl"-->
-    <!--      mode="widthFix"-->
-    <!--      @click="onClickAvatar(mainImgUrl, cat.avatars)"-->
-    <!--    />-->
     <image
       :src="mainImgUrl"
       class="cat-image"
-      mode="widthFix"
+      mode="aspectFill"
       @click="onClickAvatar(mainImgUrl, cat.avatars)"
     />
-    <view style="height: 20vh"></view>
     <view class="main">
-      <!-- <view>
-              <text>{{ cat.name }}</text>
-           </view> -->
       <Header :cat="cat" />
       <MetaInfo :cat="cat" />
       <Guide :cat="cat" />
@@ -106,12 +97,13 @@ onPullDownRefresh(() => {
 .cat-image {
   position: fixed;
   width: 100vw;
-  height: 30vh;
+  height: 48vw;
   z-index: -1;
+  top: 0;
 }
 .main {
-  border-radius: 3% 3% 0 0;
-  height: 80vh;
+  border-radius: 4vw 4vw 0 0;
+  margin-top: 43vw;
   width: 100vw;
   background-color: #ffffff;
 }

src/pages/cat/header.vue

@@ -6,7 +6,7 @@
       <!-- <image class="like" mode="widthFix" :src="Icons.Location"/> -->
     </view>
     <view class="second-line">
-      {{ props.cat.name }}
+      {{ props.cat.color }}
     </view>
   </view>
 </template>
@@ -22,10 +22,11 @@ const props = defineProps<Props>();
 
 <style scoped lang="scss">
 .header {
-  margin-top: 5vh;
-  margin-left: 4vw;
+  margin-top: 4vw;
+  margin-left: 6vw;
+  margin-right: 6vw;
   .first-line {
-    font-size: 24px;
+    font-size: 6vw;
     color: #1d1d1d;
     font-weight: 600;
     display: flex;
@@ -38,7 +39,7 @@ const props = defineProps<Props>();
 	} */
   }
   .second-line {
-    font-size: 14px;
+    font-size: 4vw;
     color: #d1d1d1;
     margin-bottom: 5vw;
   }