Ver Fonte

完成基础样式设置

yuanmingze há 8 meses atrás
pai
commit
73d0127032

+ 1 - 1
components.d.ts

@@ -7,7 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
+    WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
   }
 }

+ 8 - 0
src/config/presets/default.ts

@@ -0,0 +1,8 @@
+// src/config/project/default.ts
+import type { ProjectConfig } from './types'
+
+const defaultConfig: ProjectConfig = {
+  title: '要易小助手',
+}
+
+export default defaultConfig

+ 11 - 0
src/config/presets/index.ts

@@ -0,0 +1,11 @@
+import defaultConfig from './default'
+import luoxinConfig from './luoxin'
+import type { ProjectConfig } from './types'
+
+const MODE = import.meta.env.VITE_MODE
+
+const isLuoxin = MODE === 'production_luoxin'
+
+const projectConfig: ProjectConfig = isLuoxin ? luoxinConfig : defaultConfig
+
+export default projectConfig

+ 8 - 0
src/config/presets/luoxin.ts

@@ -0,0 +1,8 @@
+// src/config/project/luoxin.ts
+import type { ProjectConfig } from './types'
+
+const luoxinConfig: ProjectConfig = {
+  title: '罗欣小助手',
+}
+
+export default luoxinConfig

+ 5 - 0
src/config/presets/types.d.ts

@@ -0,0 +1,5 @@
+// src/config/project/types.ts
+export interface ProjectConfig {
+  /** 项目标题 */
+  title: string
+}

+ 6 - 0
src/pages.json

@@ -13,6 +13,12 @@
       "style": {
         "navigationBarTitleText": "uni-app"
       }
+    },
+    {
+      "path": "pages/login/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {

+ 5 - 46
src/pages/index/index.vue

@@ -1,52 +1,11 @@
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
-
-    <uni-badge text="1"></uni-badge>
-    <uni-badge text="2" type="success"></uni-badge>
-    <uni-badge text="3" type="primary" :inverted="true"></uni-badge>
-
-    <wd-button>主要按钮</wd-button>
-    <wd-button type="success">成功按钮</wd-button>
-    <wd-button type="primary">主要按钮</wd-button>
-    <wd-button type="info">信息按钮</wd-button>
-    <wd-button type="warning">警告按钮</wd-button>
-    <wd-button type="error">危险按钮</wd-button>
-  </view>
+  <view class="content"> </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-const title = ref('Hello')
+uni.reLaunch({
+  url: '/pages/login/index',
+})
 </script>
 
-<style scoped lang="scss">
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: var(--wot-color-theme);
-}
-</style>
+<style scoped lang="scss"></style>

+ 49 - 0
src/pages/login/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="login-content">
+    <wd-navbar
+      fixed
+      placeholder
+      :title="title"
+      left-arrow
+      safeAreaInsetTop
+      customClass="navbar"
+    ></wd-navbar>
+    <view class="login-bg"></view>
+    <view class="login-title">欢迎登录</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import projectConfig from '@/config/presets/index.ts'
+const { title } = projectConfig
+</script>
+
+<style lang="scss" scoped>
+.login-content {
+  margin-top: 170rpx;
+  padding: 0 50rpx;
+
+  :deep(.navbar) {
+    background-image: var(--login-bg);
+    overflow-y: hidden;
+    background-size: 750rpx 800rpx;
+  }
+  .login-bg {
+    position: absolute;
+    z-index: -333;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 800rpx;
+    background-image: var(--login-bg);
+  }
+
+  .login-title {
+    color: var(--font-color-333);
+    font-weight: 500;
+    font-family: 'PingFang SC';
+    font-size: 56rpx;
+    margin-bottom: 80rpx;
+  }
+}
+</style>

BIN
src/static/logo.png


+ 0 - 0
src/style/variable.scss


+ 4 - 0
src/style/variables/vars-base.scss

@@ -0,0 +1,4 @@
+:root,
+page {
+  --font-color-333: #333333;
+}

+ 4 - 0
src/style/variables/vars-defautl.scss

@@ -0,0 +1,4 @@
+:root,
+page {
+  --login-bg: linear-gradient(180deg, #ebf6fa, rgba(255, 255, 255, 0) 100%);
+}

+ 0 - 0
src/style/css-vars.scss → src/style/variables/vars-wot.scss


+ 3 - 1
src/uni.scss

@@ -75,4 +75,6 @@ $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
 
-@import '@/style/css-vars.scss';
+@import '@/style/variables/vars-wot.scss';
+@import '@/style/variables/vars-defautl.scss';
+@import '@/style/variables/vars-base.scss';