App页使用el-container, 修改了Header, Login, Register, Footer, 去除了所有TailwindCSS用法

src/components/Footer.vue

@@ -3,11 +3,11 @@
 </script>
 
 <template>
-  <div class="bg-gray-50 min-w-full bottom-0 shadow">
-    <span class="text-sm px-5">
+  <el-footer>
+    <span>
       蓝鲸购物系统
     </span>
-  </div>
+  </el-footer>
 </template>
 
 <style scoped>

src/components/Header.vue

@@ -36,41 +36,21 @@ function search() {
 </script>
 
 <template>
-  <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0 rounded-b-xl">
 
-    <div class="mx-4 p-4">
+  <el-header>
 
-      <div class="flex items-center justify-between space-x-4">
+    <div>
 
-        <div class="flex items-center">
+      <div>
+
+        <div>
           <router-link to="/allStore" v-slot="{navigate}">
             <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
           </router-link>
         </div>
 
-        <div class="w-3/4">
-          <form>
-            <div class="relative">
-
-              <!--网上抄的logo-->
-              <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
-                </svg>
-              </div>
-
-              <input type="search" id="search"
-                     v-model="searchContent"
-                     class="block w-full p-4 ps-10 text-gray-900 border border-gray-300 rounded-3xl bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="国货好物" required>
-              <button type="submit" @click="search"
-                      class="text-white absolute end-5 bottom-2.5 bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl text-sm px-4 py-2">搜索商品</button>
-            </div>
-          </form>
-        </div>
-
 
-
-        <div class="flex items-center space-x-4 mx-3">
+        <div>
           <router-link to="/manager/createStore" v-slot="{navigate}">
             <el-icon @click="navigate" :size="30" color="white" ><CirclePlus /></el-icon>
           </router-link>
@@ -79,25 +59,17 @@ function search() {
             <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
           </router-link>
 
-          <a @click="logout" class="hover:cursor-pointer">
+          <a @click="logout">
             <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
           </a>
 
-
         </div>
 
       </div>
     </div>
-  </div>
+  </el-header>
 </template>
 
-<style>
-
-.customDialog {
-  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
-}
-
-</style>
 
 <style scoped>
 </style>

src/components/Login.vue

@@ -32,12 +32,8 @@
 
     userLogin(payload)
         .then(res => {
-          console.log(res)
-          // // token塞入饼干中
-          // const token = res.result;
-          // document.cookie = `token=${token}`
 
-          // token塞入sessionStorage中
+          console.log(res)
           const token = res.result
           sessionStorage.setItem('token', token)
 
@@ -69,65 +65,47 @@
 
 <template>
 
-  <div  class="bgimage h-full w-full flex flex-col items-center justify-center px-6 py-6 space-y-10">
-
-    <span class="flex items-center text-2xl font-semibold text-gray-900">
-      Blue Whale Shopping Online
-    </span>
+  <el-main>
 
-    <el-card class="w-full bg-white rounded-lg shadow-md max-w-lg">
+    <el-card>
 
-      <div class="p-6 space-y-4 h-full overflow-scroll">
+      <div>
 
-        <h1 class="text-2xl font-bold leading-tight tracking-tight text-gray-900">
-          登入您的账户
-        </h1>
+        <h1>登入您的账户</h1>
 
-        <el-form class="space-y-6">
+        <el-form>
 
           <el-form-item>
-            <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">注册手机号</label>
-            <label v-else-if="!telLegal" for="tel" class="inline-block mb-2 font-medium text-red-500 text-sm">手机号不合法</label>
-            <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">注册手机号</label>
+            <label v-if="!hasTelInput" for="tel">注册手机号</label>
+            <label v-else-if="!telLegal" for="tel" >手机号不合法</label>
+            <label v-else for="tel">注册手机号</label>
 
-            <input id="tel" type="tel" v-model="tel"
+            <el-input id="tel" type="tel" v-model="tel"
                    required
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:outline-primary-600 rounded-lg block w-full p-2.5"
-                   :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
-                   placeholder="请输入手机号">
+                   placeholder="请输入手机号" />
           </el-form-item>
 
           <el-form-item>
-<!--            因为密码目前设定是有就行，所以也没有做条件渲染-->
-            <label for="password" class="block mb-2 text-sm font-medium text-gray-900">账户密码</label>
-            <input id="password" type="password" v-model="password"
+            <label for="password">账户密码</label>
+            <el-input id="password" type="password" v-model="password"
                    required
-                   placeholder="••••••••"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" >
+                   placeholder="••••••••"/>
           </el-form-item>
 
-<!--          <el-form-item class="pb-2">-->
-<!--            <a href="#" class="text-sm font-medium text-primary-600 hover:underline">-->
-<!--              忘记密码？-->
-<!--            </a>-->
-<!--          </el-form-item>-->
-
           <el-form-item>
-              <button @click.prevent="handleLogin"
-                      :disabled="loginDisabled"
-                      class="block my-3 w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-3 text-center disabled:bg-primary-100">
+
+              <el-button @click.prevent="handleLogin"
+                      :disabled="loginDisabled">
                 登入
-              </button>
-          </el-form-item>
+              </el-button>
+
+              <router-link to="/register" v-slot="{navigate}">
+                <el-button @click="navigate">
+                  注册
+                </el-button>
+              </router-link>
 
-          <p class="text-sm font-light text-gray-5000">
-            还没有账户？
-            <router-link to="/register" v-slot="{navigate}">
-              <span @click="navigate" class="font-medium text-primary-600 hover:underline">
-                点击注册
-              </span>
-            </router-link> 开启国货购物新体验
-          </p>
+          </el-form-item>
 
         </el-form>
 
@@ -135,16 +113,9 @@
 
 
     </el-card>
-  </div>
+  </el-main>
 </template>
 
-<style>
-
-.customDialog {
-  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
-}
-
-</style>
 
 
 <style scoped>
@@ -153,5 +124,13 @@
   background-image: url("../assets/shopping-1s-1084px.svg");
 }
 
+.input {
+  .selected {
+
+  }
+  .error {
+
+  }
+}
 
 </style>

src/components/Register.vue

@@ -81,87 +81,75 @@
 
 <template>
 
-  <div class="bgimage h-full w-full flex flex-col items-center justify-center px-6 py-6 space-y-10">
+  <el-main>
 
+    <el-card>
 
-    <span class="flex items-center text-2xl font-semibold text-gray-900">
-      Blue Whale Shopping Online
-    </span>
+      <div>
 
-    <el-card class="w-3/5 min-w-max max-w-xl bg-white rounded-lg shadow-md overflow-y-scroll">
-
-      <div class="p-6 space-y-4 overflow-auto min-h-max">
-
-        <h1 class="text-2xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1>
           创建一个新的账户
         </h1>
 
-        <el-form class="space-y-6 h-full">
+        <el-form>
 
-          <el-row class="flex flex-row justify-between">
+          <el-row>
 
             <el-col :span="15">
-              <el-form-item class="mb-0">
-                <label for="name" class="inline-block mb-2 text-sm font-medium text-gray-900">昵称</label>
-                <input id="name"
+              <el-form-item>
+                <label for="name" >昵称</label>
+                <el-input id="name"
                        v-model="name"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                       placeholder="小明">
+                       placeholder="请输入昵称" />
               </el-form-item>
             </el-col>
 
 
             <el-col :span="8">
-              <el-form-item class="mb-0">
-                <label for="identity" class="block mb-2 text-sm font-medium text-gray-900">身份</label>
-                <select id="identity"
+              <el-form-item>
+                <label for="identity">身份</label>
+                <el-select id="identity"
                         v-model="identity"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                  <option disabled value="" selected>请选择</option>
-                  <option value="CUSTOMER">顾客</option>
-                  <option value="STAFF">商家</option>
-                </select>
+                   >
+                  <el-option disabled value="" selected>请选择</el-option>
+                  <el-option value="CUSTOMER">顾客</el-option>
+                  <el-option value="STAFF">商家</el-option>
+                </el-select>
               </el-form-item>
             </el-col>
           </el-row>
 
 
-          <el-row class="flex flex-row justify-between">
+          <el-row>
             <el-col :span="8">
               <el-form-item>
-                <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
 
-                <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                <label v-if="!hasTelInput" for="tel">
                   注册手机号
                 </label>
-                <label v-else-if="!telLegal" for="tel"
-                       class="inline-block mb-2 font-medium text-red-500 text-sm">
+                <label v-else-if="!telLegal" for="tel">
                   手机号不合法
                 </label>
-                <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                <label v-else for="tel">
                   注册手机号
                 </label>
 
-                <input type="tel" id="tel"
+                <el-input type="tel" id="tel"
                        v-model="tel"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                       :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
-                       placeholder="请输入手机号">
+                       placeholder="请输入手机号" />
               </el-form-item>
             </el-col>
 
             <el-col :span="15">
               <el-form-item>
-                <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
 
-                <label for="address" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                <label for="address">
                   地址
                 </label>
 
-                <input id="address"
+                <el-input id="address"
                        v-model="address"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                       placeholder="请输入地址">
+                       placeholder="请输入地址" />
               </el-form-item>
             </el-col>
 
@@ -171,23 +159,20 @@
 
 
           <el-form-item>
-            <label for="password" class="block mb-2 text-sm font-medium text-gray-900">密码</label>
-            <input type="password" id="password"
+            <label for="password">密码</label>
+            <el-input type="password" id="password"
                    v-model="password"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                   placeholder="••••••••">
+                   placeholder="••••••••" />
           </el-form-item>
 
           <el-form-item>
-            <label v-if="!hasConfirmPasswordInput" class="inline-block mb-2 text-sm font-medium text-gray-900">确认密码</label>
-            <label v-else-if="!isPasswordIdentical" class="inline-block mb-2 text-sm font-medium text-red-600">密码不一致</label>
-            <label v-else class="inline-block mb-2 text-sm font-medium text-gray-900">确认密码</label>
+            <label v-if="!hasConfirmPasswordInput">确认密码</label>
+            <label v-else-if="!isPasswordIdentical">密码不一致</label>
+            <label v-else>确认密码</label>
 
-            <input type="password" id="confirm-password"
+            <el-input type="password" id="confirm-password"
                    v-model="confirmPassword"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                   :class="{'focus:outline-red-600': hasConfirmPasswordInput && !isPasswordIdentical}"
-                   placeholder="••••••••">
+                   placeholder="••••••••" />
           </el-form-item>
 
 <!--          <el-form-item class="flex items-start">-->
@@ -208,43 +193,27 @@
 
 
           <el-form-item>
-            <button @click.prevent="handleRegister"
-                    :disabled="registerDisabled"
-                    class="my-3 w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center disabled:bg-primary-100">
+            <el-button @click.prevent="handleRegister"
+                    :disabled="registerDisabled">
               创建账户
-            </button>
-          </el-form-item>
-
+            </el-button>
 
-          <p class="text-sm font-light text-gray-500 ">
-            已经有账户了？
             <router-link to="/login" v-slot="{navigate}">
-              <a @click="navigate" class="font-medium text-primary-600 hover:underline">
-                点击登陆
-              </a>
+              <el-button @click="navigate">
+                返回登录
+              </el-button>
             </router-link>
-          </p>
+          </el-form-item>
 
         </el-form>
       </div>
 
     </el-card>
+  </el-main>
 
-  </div>
 </template>
 
-<style>
-
-.customDialog {
-  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
-}
-
-</style>
-
 
 <style scoped>
-.bgimage {
-  background-image: url("../assets/shopping-1s-1084px.svg");
-}
 
 </style>