xingyy/heritage-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix layout

Browse Source
This commit is contained in:
张 元山 2024-02-01 15:08:07 +08:00
parent a568b3085a
commit 2351bb02fd
3 changed files with 132 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/aboutpage.vue
View File

@ -8,19 +8,19 @@
<div class="col-9 col-md-6 row justify-around items-center">
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('/home/navigation')">首页</div>
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('')">导航</div>
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('')">展览</div>
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('')">典藏</div>
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('')">资讯</div>
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('')">文创</div>
<div class="cursor header-title"
<div class="cursor header-title relative"
@click="handleLink('')">数字文脉</div>
<div class="cursor header-title hover-dom relative">关于
<div class="hidden-dom row justify-center"
@ -202,4 +202,17 @@ const handleLink = (url) => {
width: calc(100% - 320px);
}
}
.header-title:hover::after {
content: "";
background-image: url("../assets/images/icon-header-btn.png");
background-size: contain;
background-repeat: no-repeat;
width: 45px;
height: 3px;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
</style>

102
src/views/commonpage.vue
View File

@ -8,67 +8,65 @@
<div class="col-9 col-md-6 row justify-around items-center">
<div class="col-6 row justify-around items-center">
<div class="cursor header-title relative"
@click="handleLink('/home/navigation')">首页</div>
<div class="cursor header-title relative"
@click="handleLink('')">导航</div>
<div class="cursor header-title relative"
@click="handleLink('')">展览</div>
<div class="cursor header-title relative"
@click="handleLink('')">典藏</div>
<div class="cursor header-title relative"
@click="handleLink('')">资讯</div>
<div class="cursor header-title relative"
@click="handleLink('')">文创</div>
<div class="cursor header-title relative"
@click="handleLink('')">数字文脉</div>
<div class="cursor header-title"
@click="handleLink('/home/navigation')">首页</div>
<div class="cursor header-title"
@click="handleLink('')">导航</div>
<div class="cursor header-title"
@click="handleLink('')">展览</div>
<div class="cursor header-title"
@click="handleLink('')">典藏</div>
<div class="cursor header-title"
@click="handleLink('')">资讯</div>
<div class="cursor header-title"
@click="handleLink('')">文创</div>
<div class="cursor header-title"
@click="handleLink('')">数字文脉</div>
<div class="cursor header-title hover-dom relative">关于
<div class="hidden-dom row justify-center"
style="position:absolute;top:20px;left:-38px;z-index:9999">
<div class="row justify-center secmenu fl-mt-lg"
style="padding: 4px 8px ">
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/about/statutes')">制度公开</div>
<div class="cursor header-title hover-dom relative">关于
<div class="hidden-dom row justify-center"
style="position:absolute;top:20px;left:-38px;z-index:9999">
<div class="row justify-center secmenu fl-mt-lg"
style="padding: 4px 8px ">
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/about/statutes')">制度公开</div>
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/common/interpretive')">讲解服务</div>
<div class="cursor"
style="padding: 8px "
@click="handleLink('/common/audiencesurveys')">观众调查</div>
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/common/interpretive')">讲解服务</div>
<div class="cursor"
style="padding: 8px "
@click="handleLink('/common/audiencesurveys')">观众调查</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-page-width">
<router-view></router-view>
</div>
</div>
<div class="fl-page-width">
<router-view></router-view>
</div>
<div style="height:145px;background:#000;"
class="row justify-center color-white">
<div class="col-6 col-md-4 row justify-around "
style="margin-top:32px;max-width:300px">
<div class="cursor"
@click="handleLink('')">帮助</div>
<div class="
<div style="height:145px;background:#000;"
class="row justify-center color-white">
<div class="col-6 col-md-4 row justify-around "
style="margin-top:32px;max-width:300px">
<div class="cursor"
@click="handleLink('')">帮助</div>
<div class="
cursor"
@click="handleLink('')">隐私</div>
<div class="
@click="handleLink('')">隐私</div>
<div class="
cursor"
@click="handleLink('')">条款</div>
<div class="
@click="handleLink('')">条款</div>
<div class="
col-12
cursor
text-center">copyright 2024 最终所有权归延庆博物馆</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -122,4 +120,16 @@ const handleLink = (url) => {
background: #343434;
border-radius: 10px;
}
.header-title:hover::after {
content: "";
background-image: url("../assets/images/icon-header-btn.png");
background-size: contain;
background-repeat: no-repeat;
width: 45px;
height: 3px;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
</style>

101
src/views/homepage.vue
View File

@ -7,67 +7,66 @@
style="width:40px;height:40px" /><span class="fl-ml-sm">延庆博物馆</span></div>
<div class="col-9 col-md-6 row justify-around items-center">
<div class="col-6 row justify-around items-center">
<div class="cursor header-title"
@click="handleLink('/home/navigation')">首页</div>
<div class="cursor header-title"
@click="handleLink('')">导航</div>
<div class="cursor header-title"
@click="handleLink('')">展览</div>
<div class="cursor header-title"
@click="handleLink('')">典藏</div>
<div class="cursor header-title"
@click="handleLink('')">资讯</div>
<div class="cursor header-title"
@click="handleLink('')">文创</div>
<div class="cursor header-title"
@click="handleLink('')">数字文脉</div>
<div class="cursor header-title relative"
@click="handleLink('/home/navigation')">首页</div>
<div class="cursor header-title relative"
@click="handleLink('')">导航</div>
<div class="cursor header-title relative"
@click="handleLink('')">展览</div>
<div class="cursor header-title relative"
@click="handleLink('')">典藏</div>
<div class="cursor header-title relative"
@click="handleLink('')">资讯</div>
<div class="cursor header-title relative"
@click="handleLink('')">文创</div>
<div class="cursor header-title relative"
@click="handleLink('')">数字文脉</div>
<div class="cursor header-title hover-dom relative">关于
<div class="hidden-dom row justify-center"
style="position:absolute;top:20px;left:-38px;z-index:9999">
<div class="row justify-center secmenu fl-mt-lg"
style="padding: 4px 8px ">
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/about/statutes')">制度公开</div>
<div class="cursor header-title hover-dom relative">关于
<div class="hidden-dom row justify-center"
style="position:absolute;top:20px;left:-38px;z-index:9999">
<div class="row justify-center secmenu fl-mt-lg"
style="padding: 4px 8px ">
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/about/statutes')">制度公开</div>
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/common/interpretive')">讲解服务</div>
<div class="cursor"
style="padding: 8px "
@click="handleLink('/common/audiencesurveys')">观众调查</div>
<div class="cursor"
style="padding: 8px;border-bottom:1px solid #fff "
@click="handleLink('/common/interpretive')">讲解服务</div>
<div class="cursor"
style="padding: 8px "
@click="handleLink('/common/audiencesurveys')">观众调查</div>
</div>
</div>
</div>
</div>
</div>
<div>
<router-view></router-view>
</div>
</div>
<div>
<router-view></router-view>
</div>
<div style="height:145px;background:#000;"
class="row justify-center color-white">
<div class="col-6 col-md-4 row justify-around "
style="margin-top:32px;max-width:300px">
<div class="cursor"
@click="handleLink('')">帮助</div>
<div class="
<div style="height:145px;background:#000;"
class="row justify-center color-white">
<div class="col-6 col-md-4 row justify-around "
style="margin-top:32px;max-width:300px">
<div class="cursor"
@click="handleLink('')">帮助</div>
<div class="
cursor"
@click="handleLink('')">隐私</div>
<div class="
@click="handleLink('')">隐私</div>
<div class="
cursor"
@click="handleLink('')">条款</div>
<div class="
@click="handleLink('')">条款</div>
<div class="
col-12
cursor
text-center">copyright 2024 最终所有权归延庆博物馆</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -121,4 +120,16 @@ const handleLink = (url) => {
background: #343434;
border-radius: 10px;
}
.header-title:hover::after {
content: "";
background-image: url("../assets/images/icon-header-btn.png");
background-size: contain;
background-repeat: no-repeat;
width: 45px;
height: 3px;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
</style>