gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成适配移动端

Browse Source
This commit is contained in:
赵忠林
2025-03-01 10:52:11 +08:00
parent 1f79c93859
commit 8d19a58e9d
68 changed files with 2117 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/user/auth.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600"> 实名认证 </span>
</template>
<el-card shadow="hover" class="my-10 px-2">
<el-row :gutter="30" justify="space-between">
<el-col :span="16">
<el-col :sm="16" :xs="24">
<Auth @done="reload"/>
</el-col>
<el-col :span="5">
<el-col :md="5" :xs="24">
<div class="w-full mt-2 text-center" v-if="isCheck">
<el-alert type="warning" :closable="false" :title="`扫二维码完成实名认证`" />
<el-image :src="config.wxQrcode" shape="square" class="mt-2" />

2
pages/user/components/UserMenu.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-space direction="vertical" class="sm:w-[140px] sm:flex sm:mb-0 mb-5 w-full pr-7">
<el-space class="hidden-sm-and-down sm:w-[140px] sm:flex sm:mb-0 mb-5 w-full pr-7" direction="vertical">
<div class="py-2" v-for="(item,index) in activities" :index="`${item.path}`" :key="index">
<el-button :icon="item.icon" link class="text-gray-500" plain @click="navigateTo(item.path)">{{ item.name }}</el-button>
</div>

16
pages/user/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600"> 用户中心</span>
@@ -8,10 +8,10 @@
<nuxt-link to="/user/modify" class="text-gray-400 text-sm">修改资料</nuxt-link>
</template>
<div class="login-layout mt-10 sm:w-screen-xl w-full">
<div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3">
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
<div class="flash bg-white rounded-lg w-full">
<div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-5">
<el-descriptions title="用户资料" :column="2" class="px-4" border>
<el-descriptions :column="columnClasses" border class="px-4" title="用户资料">
<el-descriptions-item
label="头像"
>
@@ -42,6 +42,7 @@
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
import useFormData from '@/utils/use-form-data';
import type {User} from '@/api/system/user/model';
@@ -100,6 +101,15 @@ const onSubmit = () => {
});
}
const columnClasses = computed(() => {
const width = window.innerWidth;
if (width < 640) { // 小于 640px 时为 1 列
return 1;
} else { // 大于等于 1024px 时为 4 列
return 2;
}
});
watch(
() => route.path,
(path) => {

4
pages/user/logout.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600"> 退出登录 </span>
</template>
<div class="login-layout mt-10 sm:w-screen-xl w-full">
<div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3">
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
</div>
</div>

8
pages/user/modify.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600"> 修改资料 </span>
</template>
<div class="login-layout mt-10 sm:w-screen-xl w-full">
<div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3">
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
<div class="flash bg-white rounded-lg w-full">
<div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-4">
<el-form :model="form" label-width="auto" size="large" label-position="top">
<el-row :gutter="24">
<el-col :span="7">
<el-col :span="8" :xs="24">
<el-form-item label="上传头像" class="px-4">
<el-upload
v-model:file-list="avatar"
@@ -31,7 +31,7 @@
</el-upload>
</el-form-item>
</el-col>
<el-col :span="16">
<el-col :span="16" :xs="24">
<el-form-item label="手机号码" class="px-4">
<el-input disabled v-model="form.mobile"/>
</el-form-item>

6
pages/user/order.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600"> 已购插件 </span>
<span class="text-large font-600"> 我的订单 </span>
</template>
<div class="login-layout m-auto mt-10 sm:w-screen-xl w-full">
<div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3">
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
<div class=" bg-white rounded-lg w-full">
<div class="flash bg-white rounded-lg px-8 py-4 w-auto">
<Order :form="form" />

4
pages/user/password.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="xl:w-screen-xl m-auto py-4 my-20">
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
<el-page-header :icon="ArrowLeft" @back="goBack">
<template #content>
<span class="text-large font-600"> 用户中心 </span>
</template>
<div class="login-layout m-auto mt-10 sm:w-screen-xl w-full">
<div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3">
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
<!-- 用户菜单 -->
<UserMenu :activeIndex="activeIndex" @done="onDone" class="sm:flex hidden"/>
<div class="flash bg-white rounded-lg w-full">