refactor(profile): adjust some styles

src/views/platform/profile/components/UserInfoItem.vue

@@ -1,80 +1,79 @@
 <template>
   <div class="l-flex--col">
-    <div class="l-flex--row c-line">
-      <div class="c-grid-form__label c-line__left u-color--black u-bold">
-        绑定{{ config.label }}：
-      </div>
-      <div class="c-line__mid">
-        <el-input
-          v-model="cValue"
-          :maxlength="config.maxlength"
-          :placeholder="'请输入'+config.tipText"
-          :readonly="!expanded"
-        />
-      </div>
-      <div class="c-line__right has-left-padding">
+    <div class="l-flex--row c-sibling-item--v c-line">
+      <div class="c-grid-form__label c-line__left u-color--black u-bold">{{ config.label }}：</div>
+      <el-input
+        v-if="initial || expanded"
+        v-model="cValue"
+        class="l-flex__fill c-sibling-item"
+        :maxlength="config.maxlength"
+        :placeholder="'请输入'+config.tipText"
+        :readonly="!expanded"
+      />
+      <div class="c-sibling-item c-line__right">
         <button
           v-if="expanded === false"
           class="o-button"
-          @click="(cValue = '',expanded = true)"
+          @click="onExpanded"
         >
-          {{ initial?'更换':'绑定' }}{{ config.label }}
+          {{ initial ? '更换' : '绑定' }}{{ config.label }}
         </button>
         <div
           v-else
           class="u-pointer u-color--blue"
-          @click="(cValue =initial,expanded = false)"
+          @click="onUnexpanded"
         >
           收起
         </div>
       </div>
     </div>
-    <div
-      v-if="expanded === true"
-      class="l-flex--row c-line"
-    >
-      <div class="c-line__left" />
-      <div class="c-line__mid l-flex--row">
-        <el-input
-          v-model="code"
-          class="c-code"
-          maxlength="6"
-          placeholder="验证码"
-          @keydown.enter="bind"
-        />
-        <el-button
-          class="o-button l-flex__fill c-btn"
-          :disabled="verification"
-          @click="sendCode"
-        >
-          {{ codeText }}
-        </el-button>
+    <template v-if="expanded">
+      <div class="l-flex--row c-sibling-item--v far c-line">
+        <div class="c-line__left" />
+        <div class="l-flex__fill l-flex--row c-sibling-item">
+          <el-input
+            v-model="code"
+            class="l-flex__fill c-sibling-item"
+            maxlength="6"
+            placeholder="验证码"
+            @keydown.enter="onBind"
+          />
+          <el-button
+            class="l-flex__none c-sibling-item o-button"
+            :disabled="verification"
+            @click="sendCode"
+          >
+            {{ codeText }}
+          </el-button>
+        </div>
+        <div class="c-sibling-item c-line__right" />
       </div>
-      <div class="c-line__right" />
-    </div>
-    <div
-      v-if="expanded === true"
-      class="l-flex--row c-line"
-    >
-      <div class="c-line__left" />
-      <div class="c-line__mid l-flex--row">
-        <el-button
-          class="o-button l-flex__fill"
-          @click="bind"
-        >绑定</el-button>
+      <div class="l-flex--row c-sibling-item--v far c-line">
+        <div class="c-line__left" />
+        <div class="l-flex__fill c-sibling-item l-flex--row">
+          <el-button
+            class="o-button l-flex__fill"
+            @click="onBind"
+          >
+            绑定
+          </el-button>
+        </div>
+        <div class="c-sibling-item c-line__right" />
       </div>
-      <div class="c-line__right" />
-    </div>
+    </template>
   </div>
 </template>
 
 <script>
 import {
-  validPhone, validEmail
+  validPhone,
+  validEmail
 } from '@/utils/validate'
 import {
-  authcodeSend, authcodeCheck
+  authcodeSend,
+  authcodeCheck
 } from '@/api/user'
+
 const COUNTDOWN = 60
 const config = {
   phone: {
@@ -96,6 +95,7 @@ const config = {
     checkKey: 'checkEmail'
   }
 }
+
 export default {
   name: 'UserInfoItem',
   props: {
@@ -147,7 +147,16 @@ export default {
     clearInterval(this.$timer)
   },
   methods: {
+    onExpanded () {
+      this.cValue = ''
+      this.expanded = true
+    },
+    onUnexpanded () {
+      this.cValue = this.initial
+      this.expanded = false
+    },
     reset () {
+      this.cValue = this.initial
       this.expanded = false
       this.code = ''
       this.verification = false
@@ -206,8 +215,7 @@ export default {
           console.log(err)
         })
     },
-
-    bind () {
+    onBind () {
       if (!this.value) {
         this.$message({
           type: 'warning',
@@ -253,24 +261,25 @@ export default {
 
 <style lang="scss" scoped>
 .c-line {
-  padding-bottom: $spacing;
-  width: 420px;
+  width: 460px;
+
   &__left {
-    flex: 0 0 80px;
-  }
-  &__mid {
-    flex: 1
+    flex: 0 0 116px;
   }
+
   &__right {
-    flex: 0 0 120px;
+    flex: 0 0 100px;
   }
 }
-.c-code {
-  flex: 0 0 100px;
-  margin-right: 20px;
-}
-::v-deep.el-button.is-disabled {
-  border: 1px solid $blue;
-  color: $blue;
+
+.o-button {
+  &:hover {
+    color: #fff;
+  }
+
+  &.is-disabled {
+    color: $blue;
+    border: 1px solid $blue;
+  }
 }
 </style>

src/views/platform/profile/index.vue

@@ -41,8 +41,8 @@
         v-else
         class="has-padding l-flex--col"
       >
-        <div class="l-flex--row">
-          <UserInfoItem
+        <div class="l-flex--row has-bottom-padding">
+          <user-info-item
             v-if="user"
             key="phone"
             v-model="phone"
@@ -52,7 +52,7 @@
           />
         </div>
         <div class="l-flex--row has-padding--v">
-          <UserInfoItem
+          <user-info-item
             v-if="user"
             key="email"
             v-model="email"