style: 样式优化

src/app.vue

@@ -10,7 +10,10 @@ export default {}
 
 <style lang="scss" scoped>
 #app {
+  min-width: 320px;
   max-width: 750px;
+  min-height: 100vh;
   margin: 0 auto;
+  background-color: #fff;
 }
 </style>

src/components/CountdownButton.vue

 <template>
-  <van-button
-    native-type="button"
-    :disabled="currentDisabled"
-    :loading="loading"
-  >
-    {{ curretnValue }}
-  </van-button>
+  <van-button native-type="button" :disabled="currentDisabled" :loading="loading">{{ curretnValue }}</van-button>
 </template>
 
 <script>
@@ -61,6 +55,6 @@ export default {
   line-height: 38px;
 }
 .van-button--default {
-  border-color: #999;
+  border-color: #ccc;
 }
 </style>

src/index.html

@@ -16,8 +16,3 @@
   <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"></script>
 </body>
 </html>
-<style>
-html,body {
-  background: #fff;
-}
-</style>

src/pages/course/learn/index.vue

@@ -42,5 +42,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.course-item:last-child {
+  border-bottom: 0;
+}
 </style>

src/pages/home/index.vue

@@ -181,39 +181,40 @@ export default {
   overflow: hidden;
 }
 .course-content-tag {
+  margin-top: 0.1rem;
   li {
     display: inline-block;
-    padding: 0 5px;
-    font-size: 10px;
+    padding: 0 0.05rem;
+    font-size: 0.2rem;
     color: #2b7ce9;
-    line-height: 14px;
+    line-height: 0.28rem;
     background-color: #e9f1fc;
-    border-radius: 3px;
+    border-radius: 0.06rem;
   }
 }
 .course-content-ft {
-  margin-top: 10px;
+  margin-top: 0.1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .course-content__price {
-  font-size: 13px;
+  font-size: 0.26rem;
   font-weight: bold;
   color: #ff6767;
   line-height: 1;
   span {
-    font-size: 24px;
+    font-size: 0.48rem;
   }
 }
 .course-content__button {
-  width: 80px;
-  height: 24px;
-  font-size: 12px;
+  width: 1.6rem;
+  height: 0.48rem;
+  font-size: 0.24rem;
   color: #fff;
-  line-height: 24px;
+  line-height: 0.48rem;
   text-align: center;
   background: rgba(255, 103, 103, 1);
-  border-radius: 12px;
+  border-radius: 0.24rem;
 }
 </style>

src/pages/login/accountLogin.vue

@@ -24,10 +24,10 @@ export default {
   methods: {
     submit() {
       if (!this.ruleForm.account) {
-        this.$notify('请输入手机/邮箱/用户名')
+        this.$toast('请输入手机/邮箱/用户名')
         return false
       } else if (!this.ruleForm.password) {
-        this.$notify('请输入密码')
+        this.$toast('请输入密码')
         return false
       }
       return this.$refs.form.submit()

src/pages/login/bind.vue

-<template>
-  <div class="login">
-    <div class="login-box">
-      <div class="login-hd">
-        <h2 class="login-title">绑定</h2>
-      </div>
-      <div class="login-bd">
-        <div class="login-form">
-          <!-- 账号登录 -->
-          <account-login ref="form" @submit="onSubmit"></account-login>
-          <!-- 验证码登录 -->
-          <!-- <code-login ref="form" @submit="onSubmit"></code-login> -->
-          <div class="login-button" @click="handleSubmit">立即绑定</div>
-        </div>
-      </div>
-      <div class="login-ft">
-        <p class="login-tips">
-          登录遇到困难？请点击
-          <span class="forget-password" @click="passwordVisible = true">找回密码</span>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Cookies from 'js-cookie'
-
-import * as api from '@/api/account'
-import AccountLogin from './accountLogin.vue'
-import CodeLogin from './codeLogin.vue'
-
-export default {
-  components: { AccountLogin, CodeLogin },
-  data() {
-    const UA = navigator.userAgent.toLowerCase()
-    return {
-      ruleForm: {
-        type: 1,
-        account: '',
-        password: '',
-        RememberMe: true,
-        service: 'https://h5.ezijing.com'
-      },
-      passwordVisible: false,
-      isWechat: /micromessenger/.test(UA),
-      unionid: Cookies.get('wechat_login_no_phone_error')
-    }
-  },
-  computed: {
-    // 重定向地址
-    redirectURI() {
-      const { query } = this.$route
-      return query.redirect_uri ? decodeURIComponent(query.redirect_uri) : ''
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.submit()
-    },
-    // 提交
-    onSubmit(data) {
-      this.unionid ? this.bindWechat(data) : this.loginRequest(data)
-    },
-    // 登录
-    loginRequest(data) {
-      const params = Object.assign({}, this.ruleForm, data)
-      api
-        .login(params)
-        .then(response => {
-          this.loginSuccess(response)
-        })
-        .catch(error => {
-          error.response && this.$toast(error.response.data.message)
-        })
-    },
-    // 绑定微信并登录
-    bindWechat() {
-      const data = Object.assign({}, this.ruleForm, { unionid: this.unionid })
-      api
-        .bindWechat(data)
-        .then(response => {
-          this.loginSuccess(response)
-        })
-        .catch(error => {
-          error.response && this.$toast(error.response.data.message)
-        })
-    },
-    // 登录成功
-    loginSuccess(response) {
-      if (response.code === 0) {
-        Cookies.remove('wechat_login_error', { domain: '.ezijing.com' })
-        Cookies.remove('wechat_login_no_phone_error', {
-          domain: '.ezijing.com'
-        })
-        if (this.redirectURI) {
-          window.location.href = this.redirectURI
-        } else {
-          this.$router.replace('/')
-        }
-        // this.$router.replace('/')
-      } else {
-        this.$toast(response.msg)
-      }
-    },
-    wechatLogin() {
-      const appId = 'wx451c01d40d090d7a'
-      // 回调地址
-      const redirectURI = `${process.env.VUE_APP_WECHAT_REDIRECT_URL}?needCheck=false&identity=friend&redirectUrl=${window.location.origin}`
-      // 微信的地址
-      console.log(redirectURI)
-      const wechatUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(
-        redirectURI
-      )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
-      // 打开地址
-      window.location.href = wechatUrl
-    },
-    checkWechatLogin() {
-      return !!(
-        Cookies.get('wechat_login_error') ||
-        Cookies.get('wechat_login_no_phone_error')
-      )
-    }
-  },
-  created() {
-    // if (this.isWechat && !this.checkWechatLogin()) {
-    //   this.wechatLogin()
-    // }
-  }
-}
-</script>
-<style lang="scss">
-.login {
-  position: relative;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: url('../../assets/images/login_bg.png') no-repeat;
-  background-size: contain;
-}
-.login-box {
-  position: absolute;
-  top: 100px;
-  left: 50px;
-  right: 50px;
-  height: 400px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 20px;
-}
-.login-hd {
-  padding: 10px 0;
-}
-.login-title {
-  display: inline-block;
-  font-size: 24px;
-  color: #2b7ce9;
-  border-bottom: 5px solid #2b7ce9;
-}
-.login-bd {
-  margin-top: 20px;
-  flex: 1;
-}
-.login-button {
-  margin-top: 20px;
-  height: 40px;
-  font-size: 12px;
-  color: #fff;
-  line-height: 40px;
-  background: linear-gradient(
-    270deg,
-    rgba(43, 124, 233, 1) 0%,
-    rgba(103, 168, 255, 1) 100%
-  );
-  text-align: center;
-  border-radius: 3px;
-  cursor: pointer;
-}
-.login-ft {
-  padding: 40px 0;
-}
-.login-tips {
-  text-align: center;
-  font-size: 12px;
-  color: #999;
-  .forget-password {
-    color: #1989fa;
-  }
-}
-.login {
-  .van-field {
-    margin-bottom: 20px;
-    padding: 0;
-    flex-direction: column;
-  }
-  .van-field__label {
-    font-size: 12px;
-    color: #222;
-    margin-bottom: 5px;
-    padding-left: 10px;
-  }
-  .van-field__control {
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-  }
-}
-</style>

src/pages/login/codeLogin.vue

 <template>
   <div class="code-login">
     <van-form class="login-form" ref="form" v-on="$listeners">
-      <van-field v-model="ruleForm.account" name="account" label="手机号" placeholder="请输入手机号" />
+      <van-field
+        type="tel"
+        v-model="ruleForm.account"
+        name="account"
+        label="手机号"
+        placeholder="请输入手机号"
+      />
       <van-field
         v-model="ruleForm.password"
+        type="digit"
         :maxlength="4"
         name="password"
         label="验证码"
@@ -32,10 +39,10 @@ export default {
   methods: {
     submit() {
       if (!this.ruleForm.account) {
-        this.$notify('请输手机号')
+        this.$toast('请输入正确的手机号码')
         return false
       } else if (!this.ruleForm.password) {
-        this.$notify('请输入验证码')
+        this.$toast('验证码输入错误，请重新输入')
         return false
       }
       return this.$refs.form.submit()
@@ -43,7 +50,7 @@ export default {
     // 发送验证码
     onSendCode() {
       if (!this.ruleForm.account) {
-        this.$notify('请输手机号')
+        this.$toast('请输入正确的手机号码')
         return false
       }
       // 开始倒计时
@@ -56,17 +63,17 @@ export default {
         .sendResetPasswordCode({ account: this.ruleForm.account })
         .then(response => {
           if (response.code === 0) {
-            this.$notify({ type: 'success', message: '验证码发送成功' })
+            this.$toast({ type: 'success', message: '验证码发送成功' })
           } else {
             // 停止计时
             this.$refs.countdown.stop()
-            this.$notify(response.msg)
+            this.$toast(response.msg)
           }
         })
         .catch(error => {
           // 停止计时
           this.$refs.countdown.stop()
-          error.response && this.$notify(error.response.data.message)
+          error.response && this.$toast(error.response.data.message)
         })
     }
   }

src/pages/login/login.vue

@@ -292,4 +292,8 @@ export default {
     border-radius: 3px;
   }
 }
+.van-toast {
+  padding: 20px;
+  border-radius: 6px;
+}
 </style>

src/pages/search/courseList.vue

@@ -78,5 +78,8 @@ export default {
   font-size: 0.3rem;
   color: #222;
   border-bottom: 1px solid #f1f1f1;
+  &:last-child {
+    border-bottom: 0;
+  }
 }
 </style>

src/pages/search/tagList.vue

@@ -76,5 +76,8 @@ export default {
   font-size: 0.3rem;
   color: #222;
   border-bottom: 1px solid #f1f1f1;
+  &:last-child {
+    border-bottom: 0;
+  }
 }
 </style>

src/style.scss

@@ -93,10 +93,10 @@ body {
   font-size: 14px;
   line-height: 1.4;
   color: #222;
-  font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system,
+  font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system,
     'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, 'Hiragino Sans GB',
     'Wenquanyi Micro Hei', sans-serif;
-  background-color: #eee;
+  background-color: #f7f7f7;
 }
 .main-container {
   margin: 0 0.4rem;