attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端兼容调整

Browse Source
This commit is contained in:
WANGFAN\wangf 2025-01-16 15:35:01 +08:00
parent 4932bbaa45
commit 10bab8b54c
9 changed files with 105 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/style/global-scrollbar.scss
View File

@ -36,10 +36,10 @@
// arco滚动条样式
// 横向
.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
height: 6px !important;
height: 4px !important;
}
// 纵向
.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
width: 6px !important;
width: 4px !important;
}

16
src/style/global-style.scss
View File

@ -22,3 +22,19 @@
overflow-y: auto;
background: $color-fill-1;
}
// 铺满main窗口-有内边距
.snow-fill {
height: 100%;
padding: $padding;
overflow: hidden;
background: $color-fill-1;
}
// 铺满main窗口-内部-有内边距
.snow-fill-inner {
box-sizing: border-box;
height: 100%;
padding: $padding;
background: $color-bg-1;
}

65
src/views/component/draggable/draggable.vue
View File

@ -1,35 +1,42 @@
<template>
<div class="snow-page">
<div class="snow-inner draggable-page">
<a-space direction="vertical">
<div class="draggable-container">
<div class="title">Favorites</div>
<draggable
:list="list"
class="draggable-box"
chosen-class="chosenClass"
animation="300"
item-key="value"
@start="onStart"
@end="onEnd"
>
<template #item="{ element }">
<div class="draggable-list" :class="!animated && 'animated-fade-up-' + element.value">
<div class="draggable-inner">
<svg-icon :name="element.svg" :size="30" class="svg-box" />
<div>{{ element.label }}</div>
</div>
</div>
</template>
</draggable>
</div>
<div>
采用开源拖拽库：<a-link href="https://github.com/SortableJS/vue.draggable.next" target="_blank">vue.draggable</a-link>
</div>
</a-space>
<a-scrollbar style="height: 396px; overflow: auto" outer-class="scrollbar">
<code-view :code-json="codeJson" style="width: 500px" />
</a-scrollbar>
<a-row :gutter="16">
<a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12" :xxl="12">
<a-space direction="vertical">
<div class="draggable-container">
<div class="title">Favorites</div>
<draggable
:list="list"
class="draggable-box"
chosen-class="chosenClass"
animation="300"
item-key="value"
@start="onStart"
@end="onEnd"
>
<template #item="{ element }">
<div class="draggable-list" :class="!animated && 'animated-fade-up-' + element.value">
<div class="draggable-inner">
<svg-icon :name="element.svg" :size="30" class="svg-box" />
<div>{{ element.label }}</div>
</div>
</div>
</template>
</draggable>
</div>
<div>
采用开源拖拽库：
<a-link href="https://github.com/SortableJS/vue.draggable.next" target="_blank"> vue.draggable </a-link>
</div>
</a-space>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="12" :xxl="12">
<a-scrollbar style="height: 396px; overflow: auto" outer-class="scrollbar">
<code-view :code-json="codeJson" style="width: 500px" />
</a-scrollbar>
</a-col>
</a-row>
</div>
</div>
</template>

28
src/views/file/document-library/components/file-table.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="container-page">
<a-row :gutter="16" class="bottom-gap">
<a-col :span="6">
<a-row :gutter="16" justify="space-between" class="bottom-gap">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6" style="margin-bottom: 16px">
<a-space>
<a-button type="primary">
<template #icon>
@ -24,20 +24,16 @@
</a-space>
</a-col>
<a-col :span="6" :offset="12">
<a-form :model="form" :style="{ width: '100%' }" auto-label-width>
<a-form-item field="name">
<a-space>
<a-input v-model="form.name" placeholder="请输入搜索关键词" />
<a-button type="primary" status="success" @click="getList">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
</a-space>
</a-form-item>
</a-form>
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
<a-space>
<a-input v-model="form.name" placeholder="请输入搜索关键词" />
<a-button type="primary" status="success" @click="getList">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
</a-space>
</a-col>
</a-row>

11
src/views/file/document-library/document-library.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="snow-page">
<div class="container">
<div class="left-box">
<div class="left-box" v-show="!isMobile">
<div class="box-title">文件库</div>
<a-divider margin="0" />
<FileTree class="file-tree-style" @on-node="onNode" />
</div>
<div class="right-box">
<div class="right-box" :class="isMobile && 'row-content'">
<div class="box-title">
<a-breadcrumb>
<a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item.title }}</a-breadcrumb-item>
@ -23,7 +23,8 @@
<script setup lang="ts">
import FileTree from "@/views/file/document-library/components/file-tree.vue";
import FileTable from "@/views/file/document-library/components/file-table.vue";
import { useDevicesSize } from "@/hooks/useDevicesSize";
const { isMobile } = useDevicesSize();
const FileTableRef = ref();
const breadcrumb = ref<any>([]);
const onNode = (list: any) => {
@ -54,6 +55,10 @@ const onNode = (list: any) => {
height: calc(100% - 40px);
}
}
.row-content {
width: 100%;
margin-left: 0;
}
}
.box-title {
height: 40px;

8
src/views/form/common-form/common-form.vue
View File

@ -2,8 +2,8 @@
<div class="snow-page">
<div class="snow-inner">
<a-row :gutter="16">
<a-col :span="12">
<a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
<a-form ref="formRef" auto-label-width :size="form.size" :model="form" @submit="handleSubmit">
<a-form-item field="size" label="表单大小">
<a-radio-group v-model="form.size" type="button">
<a-radio value="mini">迷你</a-radio>
@ -21,7 +21,7 @@
]"
:validate-trigger="['change', 'input']"
>
<a-input v-model="form.name" placeholder="请输入用户名称" allow-clear />
<a-input :style="{ width: '100%' }" v-model="form.name" placeholder="请输入用户名称" allow-clear />
</a-form-item>
<a-form-item
field="age"
@ -90,7 +90,7 @@
</a-form-item>
</a-form>
</a-col>
<a-col :span="12">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
<CodeView :code-json="codeJson" />
</a-col>
</a-row>

10
src/views/form/step-form/step-form.vue
View File

@ -2,8 +2,8 @@
<div class="snow-page">
<a-spin :loading="loading" style="display: block">
<div class="snow-inner container">
<a-row>
<a-col :span="12" :offset="6">
<a-row justify="center">
<a-col :xs="22" :sm="18" :md="16" :lg="16" :xl="12" :xxl="12">
<a-steps :current="currentStep" line-less>
<a-step description="创建渠道活动">基本信息</a-step>
<a-step description="完善活动渠道信息">活动渠道</a-step>
@ -11,9 +11,9 @@
</a-steps>
</a-col>
</a-row>
<a-row class="margin-top">
<a-col :span="8" :offset="8">
<a-form ref="formRef" :model="form" :rules="rules" @submit="handleSubmit">
<a-row justify="center" class="margin-top">
<a-col :xs="18" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
<a-form ref="formRef" auto-label-width :model="form" :rules="rules" @submit="handleSubmit">
<div v-if="currentStep == 1">
<a-form-item field="name" label="活动名称">
<a-input v-model="form.name" placeholder="请输入活动名称" />

14
src/views/table/common-table/common-table.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="snow-page">
<div class="snow-inner">
<a-form ref="formRef" :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
<a-row :gutter="16" justify="start">
<a-form ref="formRef" auto-label-width :model="formData.form">
<a-row :gutter="16">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="name" label="姓名">
<a-input v-model="formData.form.name" placeholder="请输入姓名" allow-clear />
@ -19,7 +19,7 @@
</a-form-item>
</a-col>
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-space>
<a-space class="search-btn">
<a-button type="primary" @click="getCommonTableList">
<template #icon>
<icon-search />
@ -42,7 +42,7 @@
</a-space>
</a-col>
</a-row>
<a-row :gutter="16" justify="start" v-if="formData.search">
<a-row :gutter="16" v-if="formData.search">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="address" label="地址">
<a-input v-model="formData.form.address" placeholder="请输入地址" allow-clear />
@ -192,4 +192,8 @@ const getCommonTableList = async () => {
getCommonTableList();
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.search-btn {
margin-bottom: 20px;
}
</style>

22
src/views/table/custom-table/custom-table.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="snow-page">
<div class="snow-inner">
<a-form ref="formRef" :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
<a-form ref="formRef" :model="formData.form" auto-label-width>
<a-row :gutter="16">
<a-col :span="6">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="serial" label="集合编号">
<a-input v-model="formData.form.serial" placeholder="请输入集合编号" allow-clear />
</a-form-item>
</a-col>
<a-col :span="6">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="name" label="集合名称">
<a-input v-model="formData.form.name" placeholder="请输入集合名称" allow-clear />
</a-form-item>
</a-col>
<a-col :span="6">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="content" label="内容载体">
<a-input v-model="formData.form.content" placeholder="请输入内容载体" allow-clear />
</a-form-item>
</a-col>
<a-col :span="6">
<a-space>
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-space class="search-btn">
<a-button type="primary" @click="getCustomTableList">
<template #icon>
<icon-search />
@ -43,12 +43,12 @@
</a-col>
</a-row>
<a-row :gutter="16" v-if="formData.search">
<a-col :span="6">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="contentSize" label="内容量">
<a-input v-model="formData.form.contentSize" placeholder="请输入内容量" allow-clear />
</a-form-item>
</a-col>
<a-col :span="6">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="status" label="集合状态">
<a-select v-model="formData.form.status" placeholder="请选择集合状态" allow-clear>
<a-option value="1">已上线</a-option>
@ -56,7 +56,7 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="6">
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
<a-form-item field="createTime" label="创建时间">
<a-range-picker v-model="formData.form.createTime" />
</a-form-item>
@ -132,6 +132,7 @@
:bordered="{
cell: true
}"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:columns="columnsShow"
:data="data"
:row-selection="rowSelection"
@ -330,6 +331,9 @@ const exchangeArray = (columns: Array<any>, oldIndex: number, newIndex: number)
</script>
<style lang="scss" scoped>
.search-btn {
margin-bottom: 20px;
}
.setting {
display: flex;
align-items: center;