HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

专题管理-PC端专栏保存后，手机端专栏未显示

dianlixunjian
滕嵩 2024-07-22 17:16:51 +08:00
parent d04f259ec8
commit 5989e55078
5 changed files with 136 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/router/routes/basic.ts
View File

@ -23,6 +23,16 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
hideMenu: true,
},
},
{
path: '/welcome',
name: PAGE_NOT_FOUND_NAME,
component: EXCEPTION_COMPONENT,
meta: {
title: 'Welcome',
hideBreadcrumb: true,
hideMenu: true,
},
},
],
};

16
src/views/demo/system/specialcolumn/Modal/index.vue
View File

@ -2,6 +2,8 @@
<BasicModal
v-bind="$attrs"
:title="modaltitle"
centered="true"
height="700"
@register="registerModal"
@ok="modalSubmit"
@cancel="closeModal"
@ -22,19 +24,26 @@
<a-form-item label="LOGO名称" name="logoTitle">
<a-input v-model:value="modalData.logoTitle" />
</a-form-item>
<a-form-item label="状态" name="isShow">
<a-form-item label="在PC端的状态" name="isShow">
<a-select v-model:value="modalData.isShow">
<a-select-option :value="true">启用</a-select-option>
<a-select-option :value="false">停用</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="是否开放" name="isDevelop">
<a-form-item label="是否在PC端开放" name="isDevelop">
<a-switch
v-model:checked="modalData.isDevelop"
checked-children="开放"
un-checked-children="不开放"
/>
</a-form-item>
<a-form-item label="是否在APP端显示" name="appShow">
<a-switch
v-model:checked="modalData.appShow"
checked-children="显示"
un-checked-children="不显示"
/>
</a-form-item>
<a-form-item label="流程分类" name="category">
<a-select
v-model:value="modalData.category"
@ -106,8 +115,9 @@
id: '' as string,
title: '' as string,
logoTitle: '' as string,
isShow: true as boolean,
isShow: false as boolean,
isDevelop: false as boolean,
appShow: false as boolean,
isExternal: false as boolean,
linkOrApi: '' as string,
sort: 0 as number,

17
src/views/demo/system/specialcolumn/index.data.ts
View File

@ -15,12 +15,12 @@ export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'title',
width: 300,
width: 150,
},
{
title: 'LOGO名称',
dataIndex: 'logoTitle',
width: 200,
width: 150,
},
{
title: '类型',
@ -33,14 +33,19 @@ export const columns: BasicColumn[] = [
ifShow: false,
},
{
title: '状态',
title: '在PC端的状态',
dataIndex: 'isShow',
width: 200,
width: 150,
},
{
title: '是否开放',
title: '是否在PC端开放',
dataIndex: 'isDevelop',
width: 100,
width: 150,
},
{
title: '是否在APP端显示',
dataIndex: 'appShow',
width: 150,
},
{
title: '排序',

10
src/views/demo/system/specialcolumn/index.vue
View File

@ -21,6 +21,10 @@
<a-tag color="yellow" v-if="record.isDevelop">开放</a-tag>
<a-tag color="gray" v-else>不开放</a-tag>
</template>
<template v-if="column.key === 'appShow'">
<a-tag color="orange" v-if="record.appShow">显示</a-tag>
<a-tag color="gray" v-else>不显示</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-button
v-if="(nowPage - 1) * nowLimit + index != 0"
@ -76,8 +80,9 @@
id: '' as string,
title: '' as string,
logoTitle: '' as string,
isShow: true as boolean,
isShow: false as boolean,
isDevelop: false as boolean,
appShow: false as boolean,
isExternal: false as boolean,
linkOrApi: '' as string,
sort: 0 as number,
@ -145,8 +150,9 @@
id: '',
title: '',
logoTitle: '',
isShow: true,
isShow: false,
isDevelop: false,
appShow: false,
isExternal: false,
linkOrApi: '',
sort: total + 1,

149
src/views/subject/index.vue
View File

@ -1,20 +1,35 @@
<template>
<div class="subject">
<div class="subject_header">
<img class="subject_header_img" src="/subject/subject_header.png" />
<div class="subject_header_title">
<img
class="subject_header_img"
src="/subject/subject_header.png"
:style="{
width: '100%',
height: `${82 * bi}px`,
}"
/>
<div
class="subject_header_title"
:style="{
position: 'relative',
top: `${-85 * bi}px`,
}"
>
<span
:style="{
fontSize: `${42 * bi}px`,
height: `${82 * bi}px`,
}"
>
<img
src="/subject/subject_logo.png"
:style="{
top: `${3 * bi}px`,
position: 'relative',
top: `${4 * bi}px`,
width: `${78 * bi}px`,
height: `${71 * bi}px`,
marginRight: `${10 * bi}px`,
height: `${70 * bi}px`,
marginRight: `${5 * bi}px`,
}"
/>
{{ t('sys.subject.header_title') }}
@ -33,10 +48,11 @@
class="subject_box_btn"
ref="contentArea"
:style="{
top: `${50}px`,
left: `${85 * bi}px`,
height: `${688 * bi}px`,
width: `${1750 * bi}px`,
position: 'relative',
top: `${getBoxBtnAttribute()[0]}px`,
left: `${getBoxBtnAttribute()[1] * bi}px`,
height: `${getBoxBtnAttribute()[2] * bi}px`,
width: `${getBoxBtnAttribute()[3] * bi}px`,
}"
>
<div
@ -46,7 +62,8 @@
class="subject_box_btn_div"
@click="getHome(item)"
:style="{
marginRight: `${25 * bi}px`,
marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
marginBottom: `${20 * bi}px`,
height: `${325 * bi}px`,
width: `${225 * bi}px`,
@ -59,7 +76,7 @@
class="subject_box_btn_div_url"
:src="getImageUrl(item.imgUrl)"
:style="{
left: `${11 * bi}px`,
left: `${21 * bi}px`,
width: `${191 * bi}px`,
height: `${191 * bi}px`,
}"
@ -68,18 +85,18 @@
class="subject_box_btn_div_span"
v-html="renderedTitle(item.title)"
:style="{
fontSize: `${28 * bi}px`,
left: `${12 * bi}px`,
fontSize: `${fotSize * bi}px`,
left: `${22 * bi}px`,
width: `${190 * bi}px`,
height: `${(28 * spanWrap + 7) * bi}px`,
height: `${(fotSize * spanWrap + 7) * bi}px`,
}"
/>
<img
class="subject_box_btn_div_line"
src="/subject/subject_line.png"
:style="{
top: `${(14 * getWrap(item.title) - 14 * (spanWrap - 1) - 7) * bi}px`,
left: `${42 * bi}px`,
top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
left: `${52 * bi}px`,
width: `${128 * bi}px`,
height: `${7 * bi}px`,
}"
@ -88,8 +105,8 @@
class="circle arc1"
:style="{
position: 'absolute',
top: `${104 * bi}px`,
left: `${120 * bi}px`,
top: `${92 * bi}px`,
left: `${117 * bi}px`,
width: `${126 * bi}px`,
height: `${126 * bi}px`,
}"
@ -98,8 +115,8 @@
class="circle arc2"
:style="{
position: 'absolute',
top: `${104 * bi}px`,
left: `${120 * bi}px`,
top: `${92 * bi}px`,
left: `${117 * bi}px`,
width: `${126 * bi}px`,
height: `${126 * bi}px`,
}"
@ -108,8 +125,8 @@
class="circle arc3"
:style="{
position: 'absolute',
top: `${104 * bi}px`,
left: `${120 * bi}px`,
top: `${92 * bi}px`,
left: `${117 * bi}px`,
width: `${126 * bi}px`,
height: `${126 * bi}px`,
}"
@ -118,8 +135,8 @@
class="circle arc4"
:style="{
position: 'absolute',
top: `${104 * bi}px`,
left: `${120 * bi}px`,
top: `${92 * bi}px`,
left: `${117 * bi}px`,
width: `${126 * bi}px`,
height: `${126 * bi}px`,
}"
@ -262,6 +279,53 @@
const viewportHeight = ref(window.innerHeight);
const referenceWidth = 1920;
const referenceHeight = 1080;
const fotSize = ref(28);
// 计算不同数量的选项卡的布局属性
function getBoxBtnAttribute() {
let box: any = [];
box[0] = 80;
box[1] = 85;
box[2] = 700;
box[3] = 1750;
box[4] = 12;
// if (list.value.length <= 7) {
// box[0] = 80;
// box[1] = 85;
// box[2] = 700;
// box[3] = 1750;
// box[4] = 12;
// }
// if (list.value.length == 8) {
// box[0] = 80;
// box[1] = 185;
// box[2] = 700;
// box[3] = 1550;
// box[4] = 50;
// }
// if (list.value.length == 9 || list.value.length == 10) {
// box[0] = 80;
// box[1] = 135;
// box[2] = 700;
// box[3] = 1650;
// box[4] = 50;
// }
// if (list.value.length == 11 || list.value.length == 12) {
// box[0] = 80;
// box[1] = 85;
// box[2] = 700;
// box[3] = 1750;
// box[4] = 30;
// }
// if (list.value.length == 13 || list.value.length == 14) {
// box[0] = 80;
// box[1] = 85;
// box[2] = 700;
// box[3] = 1750;
// box[4] = 12;
// }
return box;
}
const updateWindowSize = () => {
viewportWidth.value = window.innerWidth;
@ -291,42 +355,26 @@
background-attachment: fixed;
width: 100%;
height: 100%;
// 页面不能被选中
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
&_header {
&_img {
height: 82px;
width: 100%;
}
&_title {
position: relative;
top: -87px;
span {
img {
position: relative;
top: 3px;
width: 78px;
height: 71px;
margin-right: 10px;
}
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
height: 82px;
font-family: 068-SSZhengYaTi;
font-weight: 400;
font-size: 42px;
color: #ffffff;
font-weight: 900 !important;
letter-spacing: 2px;
letter-spacing: 1.5px;
}
}
@ -370,30 +418,21 @@
justify-content: center;
display: flex;
flex-wrap: wrap;
position: relative;
top: 50px;
// left: 100px;
height: 688px;
width: 100%;
display: flex;
overflow-x: hidden;
overflow-y: auto;
// 隐藏滚动条
-ms-overflow-style: none; /* IE 和 Edge */
scrollbar-width: none; /* Firefox */
::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
&_div {
// 弹性子元素（flex item）的弹性行为
flex: 0 0 auto;
margin-right: 20px;
margin-bottom: 20px;
height: 320px;
width: 225px;
transition: all 0.3s ease;
padding: 10px;
// 定义旋转
// 设置透视距离