登录相关页和首页组件适配

src/components/EditOption.vue

@@ -184,7 +184,7 @@ onMounted(async () => {
 
 <template>
   <view
-    class="container"
+    class="edit-option"
     :style="{
       maxHeight: expand ? '500px' : '50px',
       marginTop: noArrow ? '0' : '10px',
@@ -207,14 +207,14 @@ onMounted(async () => {
         }}</text>
         <text v-if="!expand && itemIndex === 3">{{ formatSetAndAmount }}</text>
       </block>
-      <button hover-class="none">
+      <view>
         <image
           v-if="!noArrow"
           src="../static/arrow-grey.png"
           mode="widthFix"
           :style="{ transform: expand ? 'rotateX(180deg)' : 'rotateX(0deg)' }"
         />
-      </button>
+      </view>
     </view>
     <view v-if="itemIndex === 0" class="bow-items">
       <view
@@ -342,7 +342,7 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.container {
+.edit-option {
   width: calc(100% - 20px);
   background-color: #fff;
   border-radius: 10px;
@@ -352,25 +352,25 @@ onMounted(async () => {
   transition: all 0.3s ease;
   color: #333;
 }
-.container > view:first-child {
+.edit-option > view:first-child {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 50px;
 }
-.container > view:first-child > view:first-child {
+.edit-option > view:first-child > view:first-child {
   width: 85px;
 }
-.container > view:first-child > text:nth-child(2) {
+.edit-option > view:first-child > text:nth-child(2) {
   font-weight: 500;
 }
-.container > view:first-child > button {
+.edit-option > view:first-child > view {
   width: 85px;
   display: flex;
   justify-content: flex-end;
 }
-.container > view:first-child > button > image {
+.edit-option > view:first-child > view > image {
   transition: all 0.5s ease;
   width: 16px;
   height: 16px;

src/components/InputRow.vue

@@ -28,32 +28,27 @@ const hide = ref(true);
 </script>
 
 <template>
-  <view class="container" :style="{ width }">
+  <view class="input-row" :style="{ width }">
     <input
       :type="type"
       @change="onChange"
       :placeholder="placeholder"
       placeholder-style="color: #999;"
     />
-    <button v-if="btnType === 'code'" hover-class="none" class="get-code">
+    <view v-if="btnType === 'code'" class="get-code">
       get verification code
-    </button>
-    <button
-      v-if="type === 'password'"
-      hover-class="none"
-      class="eye-btn"
-      @click="hide = !hide"
-    >
+    </view>
+    <view v-if="type === 'password'" class="eye-btn" @click="hide = !hide">
       <image
         :src="`../static/${hide ? 'eye-close' : 'eye-open'}.png`"
         mode="widthFix"
       />
-    </button>
+    </view>
   </view>
 </template>
 
 <style scoped>
-.container {
+.input-row {
   height: 100rpx;
   display: flex;
   justify-content: space-between;
@@ -72,7 +67,8 @@ const hide = ref(true);
 .get-code {
   color: #287fff;
   font-size: 26rpx;
-  width: 80%;
+  width: 60%;
+  text-align: right;
 }
 .eye-btn {
   padding: 20rpx;

src/components/SButton.vue

@@ -53,9 +53,8 @@ const onBtnClick = debounce(async () => {
 </script>
 
 <template>
-  <button
+  <view
     class="sbtn"
-    hover-class="none"
     :style="{
       width: width,
       borderRadius: rounded + 'rpx',
@@ -71,7 +70,7 @@ const onBtnClick = debounce(async () => {
     <block v-else>
       <image src="../static/btn-loading.png" mode="widthFix" class="loading" />
     </block>
-  </button>
+  </view>
 </template>
 
 <style scoped>

src/components/SModal.vue

@@ -41,7 +41,7 @@ watch(
 
 <template>
   <view
-    class="container"
+    class="s-modal"
     v-if="showContainer"
     :style="{ opacity: show ? 1 : 0 }"
     @click="onClose"
@@ -68,7 +68,7 @@ watch(
 </template>
 
 <style scoped>
-.container {
+.s-modal {
   position: fixed;
   top: 0;
   left: 0;