blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-05 06:12:44 +08:00
Code Issues Projects Releases Wiki Activity

style-重新修改样式

Browse Source
This commit is contained in:
Huang 2022-06-20 11:44:19 +08:00
parent 991bfba424
commit 9fba54dd1a
6 changed files with 84 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/BasicInput/index.vue
View File

@ -1,5 +1,5 @@
<template>
<input :type="type" v-bind="$attrs" />
<input :type="type" :name="name" :value="value" />
</template>
<script lang="ts">
@ -11,10 +11,18 @@
type: String,
default: 'text',
},
name: {
type: String,
default: '',
},
value: {
type: String,
default: '',
},
},
setup(props) {
const test = 'Test';
return { test };
const _props = props;
return {};
},
});
</script>

4
src/pages/about/index.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup></script>
<template>
<view> 页面模板 </view>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

4
src/pages/demo/index.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup></script>
<template>
<view> 页面模板,新建pages,将此页面内容复制粘贴到新建.vue文件 </view>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

3
src/pages/index/index.vue
View File

@ -10,7 +10,7 @@
<template>
<view class="content">
<image class="logo" src="/static/svg/LOGO.svg" />
<view class="text-area mb-60rpx">
<view class="text-area">
<text class="">{{ title }}</text>
</view>
<BasicButton @click="handleGetStarted">Get Started → </BasicButton>
@ -33,6 +33,7 @@
.text-area {
display: flex;
justify-content: center;
margin-bottom: 60rpx;
}
.title {

90
src/pages/login/index.vue
View File

@ -1,27 +1,3 @@
<template>
<view class="max-w-4/5 mx-auto py-36rpx text-center pt-280rpx">登录</view>
<view class="shadow-lg max-w-4/5 mx-auto py-36rpx px-24rpx">
<form class="form" @submit="submit">
<label class="h-44px flex items-center border-0 border-b-3rpx border-solid border-blue-100">
<view class="min-w-96rpx">邮箱:</view>
<view class="flex-grow"><BasicInput name="email" :value="form.email" /></view>
</label>
<label class="h-44px flex items-center border-0 border-b-3rpx border-solid border-blue-100">
<view class="min-w-96rpx">密码:</view>
<view class="flex-grow"
><BasicInput type="password" name="password" :value="form.password"
/></view>
</label>
<button
form-type="submit"
class="border-4rp mt-44rpx h-88rpx flex items-center justify-center border-solid border-blue-200 bg-blue-400 hover:bg-blue-500 text-xs text-light-100 hover:text-light-100"
hover-class="none"
>登录</button
>
</form>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useAuthStore } from '@/state/modules/auth';
@ -49,4 +25,68 @@
};
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<view class="title">登录</view>
<view class="form-wrap">
<form class="form" @submit="submit">
<label class="form-item">
<view class="form-label">邮箱:</view>
<view class="form-element"><BasicInput name="email" :value="form.email" /></view>
</label>
<label class="form-item">
<view class="form-label">密码:</view>
<view class="form-element"
><BasicInput type="password" name="password" :value="form.password"
/></view>
</label>
<button
form-type="submit"
class="submit-btn border-4rp mt-44rpx h-88rpx flex items-center justify-center border-solid border-blue-200 bg-blue-400 hover:bg-blue-500 text-xs text-light-100 hover:text-light-100"
hover-class="none"
>登录</button
>
</form>
</view>
</view>
</template>
<style lang="scss" scoped>
.container {
margin: 0 auto;
width: 80%;
.title {
padding: 320rpx 0 32rpx 0;
text-align: center;
}
.form-wrap {
padding: 20rpx 24rpx;
box-shadow: 16rpx 16rpx 30rpx #e5e7eb;
.form {
.form-item {
display: flex;
height: 88rpx;
border-bottom: 2rpx solid #dbeafe;
align-items: center;
.form-label {
min-width: 96rpx;
}
.form-element {
flex-grow: 1;
}
}
.submit-btn {
margin-top: 44rpx;
border: 4rpx solid #bfdbfe;
background-color: #60a5fa;
border-radius: 8rpx;
font-size: 28rpx;
color: #ffffff;
:hover {
background-color: #3b82f6;
}
}
}
}
}
</style>

4
src/pages/template/index.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup></script>
<template>
<view> 页面模板,新建pages,将此页面内容复制粘贴到新建.vue文件 </view>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>