forked from github/dataease
fix(移动端): 移动端设置样式问题
This commit is contained in:
dataeaseShu
parent
6bef13f437
commit
8c91088eab
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 260 KiB |
@ -1,5 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.66666 3.66667H9.33332V5H6.66666V3.66667Z" fill="#1F2329"/>
|
||||
<path d="M8.99999 11H6.99999V12.3333H8.99999V11Z" fill="#1F2329"/>
|
||||
<path d="M3.33332 1C2.96513 1 2.66666 1.29848 2.66666 1.66667V14.3333C2.66666 14.7015 2.96513 15 3.33332 15H12.6667C13.0348 15 13.3333 14.7015 13.3333 14.3333V1.66667C13.3333 1.29848 13.0348 1 12.6667 1H3.33332ZM3.99999 2.33333H12V13.6667H3.99999V2.33333Z" fill="#1F2329"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.66666 3.66667H9.33332V5H6.66666V3.66667Z" />
|
||||
<path d="M8.99999 11H6.99999V12.3333H8.99999V11Z" />
|
||||
<path d="M3.33332 1C2.96513 1 2.66666 1.29848 2.66666 1.66667V14.3333C2.66666 14.7015 2.96513 15 3.33332 15H12.6667C13.0348 15 13.3333 14.7015 13.3333 14.3333V1.66667C13.3333 1.29848 13.0348 1 12.6667 1H3.33332ZM3.99999 2.33333H12V13.6667H3.99999V2.33333Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 515 B After Width: | Height: | Size: 461 B |
@ -1,4 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" fill="#3370FF"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" />
|
||||
<path d="M11.5881 4.90381L12.3966 5.71231C12.4291 5.74481 12.4549 5.78339 12.4725 5.82586C12.4901 5.86833 12.4992 5.91384 12.4992 5.95981C12.4992 6.00577 12.4901 6.05129 12.4725 6.09375C12.4549 6.13622 12.4291 6.17481 12.3966 6.20731L7.17813 11.4258C7.14563 11.4583 7.10705 11.4841 7.06458 11.5017C7.02212 11.5193 6.9766 11.5283 6.93063 11.5283C6.88467 11.5283 6.83915 11.5193 6.79669 11.5017C6.75422 11.4841 6.71564 11.4583 6.68313 11.4258L3.70213 8.44481C3.66963 8.41231 3.64385 8.37372 3.62625 8.33126C3.60866 8.28879 3.59961 8.24327 3.59961 8.19731C3.59961 8.15134 3.60866 8.10583 3.62625 8.06336C3.64385 8.0209 3.66963 7.98231 3.70213 7.94981L4.51063 7.14181C4.54314 7.1093 4.58172 7.08352 4.62419 7.06593C4.66665 7.04834 4.71217 7.03928 4.75813 7.03928C4.8041 7.03928 4.84962 7.04834 4.89208 7.06593C4.93455 7.08352 4.97313 7.1093 5.00563 7.14181L6.93063 9.06631L11.0936 4.90331C11.1261 4.8708 11.1647 4.84502 11.2072 4.82743C11.2497 4.80984 11.2952 4.80078 11.3411 4.80078C11.3871 4.80078 11.4326 4.80984 11.4751 4.82743C11.5175 4.84502 11.5556 4.8713 11.5881 4.90381Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -186,10 +186,6 @@ const multiplexingCanvasOpen = () => {
|
||||
multiplexingRef.value.dialogInit()
|
||||
}
|
||||
|
||||
const mobileConfig = () => {
|
||||
useEmitt().emitter.emit('mobileConfig')
|
||||
}
|
||||
|
||||
eventBus.on('preview', previewInner)
|
||||
eventBus.on('save', saveCanvasWithCheck)
|
||||
eventBus.on('clearCanvas', clearCanvas)
|
||||
@ -198,6 +194,10 @@ const openDataBoardSetting = () => {
|
||||
dvMainStore.setCurComponent({ component: null, index: null })
|
||||
}
|
||||
|
||||
const openMobileSetting = () => {
|
||||
useEmitt().emitter.emit('mobileConfig')
|
||||
}
|
||||
|
||||
const batchDelete = () => {
|
||||
const componentDataTemp = deepCopy(componentData.value)
|
||||
componentDataTemp.forEach(component => {
|
||||
@ -423,12 +423,6 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
|
||||
is-label
|
||||
@customClick="multiplexingCanvasOpen"
|
||||
></component-button-label>
|
||||
<component-button-label
|
||||
icon-name="icon_copy_filled"
|
||||
title="移动端"
|
||||
is-label
|
||||
@customClick="mobileConfig"
|
||||
></component-button-label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -449,6 +443,14 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
|
||||
icon-name="dv-dashboard"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<div class="divider"></div>
|
||||
<el-tooltip effect="dark" content="移动端配置" placement="bottom">
|
||||
<component-button
|
||||
tips="移动端配置"
|
||||
@custom-click="openMobileSetting"
|
||||
icon-name="icon_phone_outlined"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<el-dropdown v-if="editMode === 'edit'" trigger="hover">
|
||||
@ -647,6 +649,12 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
|
||||
.divider {
|
||||
background: #ffffff4d;
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.custom-el-icon {
|
||||
margin-left: 15px;
|
||||
|
||||
@ -930,6 +930,7 @@ onMounted(() => {
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,9 @@ const emits = defineEmits(['customClick'])
|
||||
v-on:click="emits('customClick')"
|
||||
>
|
||||
<el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
|
||||
<Icon class="toolbar-icon" :name="iconName" />
|
||||
<el-icon class="toolbar-icon">
|
||||
<Icon :name="iconName" />
|
||||
</el-icon>
|
||||
<span>{{ title }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -35,17 +37,35 @@ const emits = defineEmits(['customClick'])
|
||||
padding-right: 10px;
|
||||
}
|
||||
.group_inner {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
color: #ffffff99;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: calc(100% + 10px);
|
||||
height: calc(100% + 10px);
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
&::after {
|
||||
display: block;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
&::after {
|
||||
display: block;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
span {
|
||||
float: left;
|
||||
@ -65,8 +85,6 @@ const emits = defineEmits(['customClick'])
|
||||
}
|
||||
|
||||
.toolbar-icon {
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="drag-info-main">
|
||||
<el-row style="justify-content: center">
|
||||
<Icon style="width: 125px; height: 125px" name="dv-drag-tips"></Icon>
|
||||
</el-row>
|
||||
<el-row class="tips-info"> {{ tips }} </el-row>
|
||||
<template v-if="!mobileInPc">
|
||||
<el-row style="justify-content: center">
|
||||
<Icon style="width: 125px; height: 125px" name="dv-drag-tips"></Icon>
|
||||
</el-row>
|
||||
<el-row class="tips-info"> {{ tips }} </el-row>
|
||||
</template>
|
||||
<div v-else class="mobile-in-pc-tips">请从右侧添加可视化组件</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,7 +15,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { dvInfo } = storeToRefs(dvMainStore)
|
||||
const { dvInfo, mobileInPc } = storeToRefs(dvMainStore)
|
||||
|
||||
const tips =
|
||||
'从顶部工具栏中选择组件，添加到这里创建' +
|
||||
@ -26,6 +29,15 @@ const tips =
|
||||
top: calc(40% - 90px);
|
||||
width: 250px;
|
||||
height: 180px;
|
||||
|
||||
.mobile-in-pc-tips {
|
||||
color: #646a73;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
margin-top: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-info {
|
||||
|
||||
@ -159,7 +159,7 @@ const save = () => {
|
||||
{{ dvInfo.name }}
|
||||
</div>
|
||||
<div class="config-panel-content" v-loading="mobileLoading">
|
||||
<iframe src="./mobile.html#/panel" frameborder="0" width="375" height="640" />
|
||||
<iframe src="./mobile.html#/panel" frameborder="0" width="375" />
|
||||
</div>
|
||||
<div class="config-panel-foot"></div>
|
||||
</div>
|
||||
@ -215,7 +215,6 @@ const save = () => {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
background: #f5f6f7;
|
||||
overflow-y: auto;
|
||||
|
||||
.top-bar {
|
||||
position: sticky;
|
||||
@ -263,7 +262,7 @@ const save = () => {
|
||||
height: 854px;
|
||||
overflow: hidden;
|
||||
background-size: 100% 100% !important;
|
||||
height: 777px;
|
||||
height: calc(100vh - 120px);
|
||||
position: absolute;
|
||||
top: 104px;
|
||||
left: calc(50% - 419px);
|
||||
@ -289,20 +288,28 @@ const save = () => {
|
||||
|
||||
.config-panel-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 130px);
|
||||
border-bottom-left-radius: 45px;
|
||||
border-bottom-right-radius: 45px;
|
||||
overflow: hidden;
|
||||
iframe {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-com-list {
|
||||
float: right;
|
||||
width: 420px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
border-left: rgba(31, 35, 41, 0.15) 1px solid;
|
||||
height: 100%;
|
||||
height: calc(100% - 64px);
|
||||
overflow-y: auto;
|
||||
:deep(.ed-collapse) {
|
||||
--ed-collapse-header-font-size: 12px;
|
||||
--ed-collapse-content-font-size: 12px;
|
||||
}
|
||||
|
||||
.config-mobile-sidebar {
|
||||
font-size: 14px;
|
||||
@ -316,7 +323,7 @@ const save = () => {
|
||||
margin-bottom: 8px;
|
||||
float: left;
|
||||
background: #fff;
|
||||
padding: 31px 4px 36px 4px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee0e3;
|
||||
&:nth-child(2n) {
|
||||
|
||||
@ -49,6 +49,12 @@ const onClickLeft = () => {
|
||||
emits('hiddenTabbar', false)
|
||||
}
|
||||
}
|
||||
|
||||
const onClickPanel = () => {
|
||||
directName.value = []
|
||||
directId.value = []
|
||||
activeDirectName.value = ''
|
||||
}
|
||||
const router = useRouter()
|
||||
|
||||
const handleCellClick = ele => {
|
||||
@ -114,8 +120,22 @@ onMounted(() => {
|
||||
:left-arrow="!!activeDirectName"
|
||||
@click-left="onClickLeft"
|
||||
/>
|
||||
<div class="direct-name-arr" v-if="directName.length">
|
||||
<div @click="onClickPanel" key="仪表板">
|
||||
<span class="label primary-name">仪表板</span>
|
||||
<el-icon>
|
||||
<Icon name="icon_right_outlined"></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-for="(ele, index) in [...directName]" :key="ele">
|
||||
<span class="label">{{ ele }}</span>
|
||||
<el-icon v-if="index !== directName.length - 1">
|
||||
<Icon name="icon_right_outlined"></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</van-sticky>
|
||||
<div class="dashboard-cell-group">
|
||||
<div :class="!!directName.length && 'dashboard-cell-group-tab'" class="dashboard-cell-group">
|
||||
<DashboardCell
|
||||
v-for="ele in activeTableData"
|
||||
:key="ele.id"
|
||||
@ -136,6 +156,38 @@ onMounted(() => {
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 102px);
|
||||
margin-top: 8px;
|
||||
|
||||
&.dashboard-cell-group-tab {
|
||||
margin-top: 0;
|
||||
height: calc(100vh - 146px);
|
||||
}
|
||||
}
|
||||
|
||||
.direct-name-arr {
|
||||
height: 44px;
|
||||
padding: 12px 16px;
|
||||
color: #646a73;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ed-icon {
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.primary-name {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -186,6 +186,13 @@ const formatterTime = val => {
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
|
||||
.empty-tips {
|
||||
color: #646a73;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@ -50,6 +50,15 @@ const visible = ref(true)
|
||||
const clickRightIcon = () => {
|
||||
visible.value = !visible.value
|
||||
}
|
||||
|
||||
const inputFocus = ref('')
|
||||
const handleFocus = val => {
|
||||
inputFocus.value = val
|
||||
}
|
||||
|
||||
const handleBlur = () => {
|
||||
inputFocus.value = ''
|
||||
}
|
||||
const onSubmit = async () => {
|
||||
if (!checkUsername(username.value) || !validatePwd(password.value)) {
|
||||
showToast({
|
||||
@ -102,7 +111,10 @@ const usernameEndValidate = ({ status, message }) => {
|
||||
name="用户名"
|
||||
:style="{ borderColor: !!usernameError ? '#F54A45' : '#bbbfc4' }"
|
||||
placeholder="请输入用户名"
|
||||
@blur="handleBlur"
|
||||
:class="inputFocus === 'username' && 'input-focus-primary'"
|
||||
@end-validate="usernameEndValidate"
|
||||
@focus="handleFocus('username')"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<div v-if="!!usernameError" class="van-ed-error">
|
||||
@ -111,8 +123,11 @@ const usernameEndValidate = ({ status, message }) => {
|
||||
<van-field
|
||||
v-model="password"
|
||||
:type="visible ? 'password' : 'text'"
|
||||
:class="inputFocus === 'password' && 'input-focus-primary'"
|
||||
@click-right-icon="clickRightIcon"
|
||||
:style="{ borderColor: !!passwordError ? '#F54A45' : '#bbbfc4' }"
|
||||
@focus="handleFocus('password')"
|
||||
@blur="handleBlur"
|
||||
name="密码"
|
||||
placeholder="请输入密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
@ -163,6 +178,10 @@ const usernameEndValidate = ({ status, message }) => {
|
||||
--van-button-default-height: 48px;
|
||||
--van-field-placeholder-text-color: #8f959e;
|
||||
|
||||
.input-focus-primary {
|
||||
border-color: var(--ed-color-primary) !important;
|
||||
}
|
||||
|
||||
.van-ed-error {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user