制作手机端
This commit is contained in:
parent
ffae138f9c
commit
311cf487d1
136
components/PhoneFooter.vue
Normal file
136
components/PhoneFooter.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<!-- PC端布局 -->
|
||||
<div>
|
||||
<div class="flex-row">
|
||||
<div class="fly1s" style="width: 100%;padding: 0px 20px;">
|
||||
<div style="display: flex;justify-content: center;align-items: center;gap: 10px;">
|
||||
<div class="b1" @click="openT()">中央人民政府</div>
|
||||
<div class="b1">
|
||||
<select @change="getSelect" style="width: 100%;height: 41px;">
|
||||
<option value="0">省级共青团网站</option>
|
||||
<option v-for="item in s_list" :value="item.url">{{ item.title }}</option>
|
||||
</select>
|
||||
<img :src="`/img/index/bi.png`"
|
||||
style="position: absolute;top: 7px;right: 5px;height: 30px;width: 30px;cursor: pointer;"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 10px;">
|
||||
<div class="b1">
|
||||
<select @change="getSelect" style="width: 100%;height: 41px;">
|
||||
<option value="0">各地共青团网站</option>
|
||||
<option v-for="item in d_list" :value="item.url">{{ item.title }}</option>
|
||||
</select>
|
||||
<img :src="`/img/index/bi.png`"
|
||||
style="position: absolute;top: 7px;right: 5px;height: 30px;width: 30px;cursor: pointer;"></img>
|
||||
</div>
|
||||
<div class="b1">
|
||||
<select @change="getSelect" style="width: 100%;height: 41px;">
|
||||
<option value="0">其他</option>
|
||||
<option v-for="item in q_list" :value="item.url">{{ item.title }}</option>
|
||||
</select>
|
||||
<img :src="`/img/index/bi.png`"
|
||||
style="position: absolute;top: 7px;right: 5px;height: 30px;width: 30px;cursor: pointer;"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 1px;background-color:#EEEEEE;width: 100%;margin-top: 20px;"></div>
|
||||
<div class="buttom_bg" style="padding:30px;">
|
||||
<div>
|
||||
<div>
|
||||
©2021 备案号：中国共产主义青年团洛阳市委员会 版权所有
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin: 15px 0px;">
|
||||
<div>
|
||||
<div>
|
||||
备案号：豫ICP备2021030615号-1
|
||||
</div>
|
||||
<div>
|
||||
Email：lytswbgs@163.com
|
||||
</div>
|
||||
<div class="">电话：0379-63225071</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/img/index/dzjg.png`" style="width: 50px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
地址：河南省洛阳市洛龙区展览路20号（市总工会大楼）3楼 邮编：471000
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;gap: 15px;text-align: center;padding-top: 20px;">
|
||||
|
||||
<div>
|
||||
<img class="" referrerpolicy="no-referrer" :src="`/img/wxcode.jpg`" />
|
||||
<p class="mt-[10px]">官方微信</p>
|
||||
</div>
|
||||
<div>
|
||||
<img class="" referrerpolicy="no-referrer" :src="`/img/dycode.jpg`" />
|
||||
<p class="mt-[10px]">官方抖音</p>
|
||||
</div>
|
||||
<div>
|
||||
<img class="" referrerpolicy="no-referrer" :src="`/img/wbcode.jpg`" />
|
||||
<p class="mt-[10px]">官方微博</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img class="" referrerpolicy="no-referrer" :src="`/img/bilicode.jpg`" />
|
||||
<p class="mt-[10px]">bilibili官方</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const getSelect = (event: Event) => {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
var url = target.value;
|
||||
if (url == '0') {
|
||||
return;
|
||||
} else {
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
|
||||
// 使用store中的分类数据
|
||||
const s_list = computed(() => store.s_list);
|
||||
const d_list = computed(() => store.d_list);
|
||||
const q_list = computed(() => store.q_list);
|
||||
const b_list = computed(() => store.b_list);
|
||||
|
||||
onMounted(() => {
|
||||
// 调用store中的方法获取友情链接数据
|
||||
store.getFriendshipLinks();
|
||||
})
|
||||
|
||||
const openT = () => {
|
||||
window.open('https://www.gov.cn/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/index.scss';
|
||||
.buttom_bg{
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.b1 {
|
||||
width: 100%;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #323232;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEEEEE;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
205
components/PhoneHeader.vue
Normal file
205
components/PhoneHeader.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="group_666" style="position: relative;height: 219px;">
|
||||
<img :src="`/img/index/phone_top.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
<img :src="`/img/index/dlogo1.png`"
|
||||
style="width: 100px;height: 100px;position: absolute;left: 0;right: 0;top: 40px;margin: 0 auto;">
|
||||
<img :src="`/img/xuan.png`" @click="show = true" style="width: 25px;height: 25px;position: absolute;right: 20px;top: 30px;">
|
||||
</div>
|
||||
<div v-if="show" style="z-index: 999;;background-color: rgba(0, 0, 0, 0.5);height: 100%;width: 100%;top: 0;position: fixed;"></div>
|
||||
<div class="bgimg" v-if="show">
|
||||
<img :src="`/img/guan.png`" @click="show = false" style="width: 25px;height: 25px;position: absolute;right: 20px;top: 30px;">
|
||||
<div class="pc-nav">
|
||||
|
||||
<div class="pc-nav-item" @click="gotoList(1)">
|
||||
<img :src="crrent == 1 ? '/img/index/home1.png' : '/img/index/home.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 1 }]">官网首页</span>
|
||||
<img v-if="crrent == 1" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(2)">
|
||||
<img :src="crrent == 2 ? '/img/index/aboutus1.png' : '/img/index/aboutus.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 2 }]">组织机构</span>
|
||||
<img v-if="crrent == 2" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(3)">
|
||||
<img :src="crrent == 3 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 3 }]">新闻动态</span>
|
||||
<img v-if="crrent == 3" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(4)">
|
||||
<img :src="crrent == 4 ? '/img/index/ly1.png' : '/img/index/ly.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 4 }]">青春洛阳</span>
|
||||
<img v-if="crrent == 4" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(5)">
|
||||
<img :src="crrent == 5 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 5 }]">服务青年</span>
|
||||
<img v-if="crrent == 5" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(6)">
|
||||
<img :src="crrent == 6 ? '/img/index/message1.png' : '/img/index/message.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 6 }]">信息公开</span>
|
||||
<img v-if="crrent == 6" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(7)">
|
||||
<img :src="crrent == 7 ? '/img/index/tt1.png' : '/img/index/tt.png'" alt=""></img>
|
||||
<span :class="['span', { 'active': crrent == 7 }]">团团留言板</span>
|
||||
<img v-if="crrent == 7" src="/img/index/arrow.png" alt=""
|
||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<!-- <div class="pc-nav-item" @click="gotoList(8)">
|
||||
<img :src="crrent==8?'/img/index/gx1.png':'/img/index/gx.png'" alt=""></img>
|
||||
<span :class="['span',{'active': crrent==8}]">团关系转接</span>
|
||||
<img v-if="crrent==8" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="goback" @click="goBack">返回首页</div> -->
|
||||
<div style="margin-top: 80px;margin-left: 80px;">
|
||||
<div class="box_1" id='assist-open'>无障碍阅读</div>
|
||||
<!-- <div class="box_2" @click="openOldMode">{{ isOld ? '退出适老模式' : '进入适老模式' }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits, defineProps } from 'vue'
|
||||
import '@/assets/assist/assist-entry.js'
|
||||
const router = useRouter();
|
||||
const props = defineProps({
|
||||
crrentNum: Number,
|
||||
isOld: Boolean
|
||||
});
|
||||
const crrent = ref(0);
|
||||
const show=ref(false);
|
||||
const emit = defineEmits(['crrentTop'])
|
||||
const goBack = () => {
|
||||
if (router.currentRoute.value.path != '/') {
|
||||
window.open(`/`, '_blank');
|
||||
}
|
||||
emit('crrentTop', 0)
|
||||
}
|
||||
|
||||
const openOldMode = () => {
|
||||
emit('openOldMode')
|
||||
}
|
||||
|
||||
const gotoList = (index: number) => {
|
||||
console.log(router.currentRoute);
|
||||
if (router.currentRoute.value.path != '/') {
|
||||
window.open(`/`, '_blank');
|
||||
localStorage.setItem('index_detail', index)
|
||||
}
|
||||
crrent.value = index
|
||||
emit('crrentTop', index)
|
||||
|
||||
}
|
||||
//更新当前索引值
|
||||
onUpdated(() => {
|
||||
crrent.value = props.crrentNum;
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
crrent.value = props.crrentNum;
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/index.scss';
|
||||
|
||||
.bgimg {
|
||||
width: 270px;
|
||||
height: 100vh;
|
||||
background-image: url('/img/right.png');
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
.line_h {
|
||||
width: 220px;
|
||||
height: 1px;
|
||||
background: #FFFFFF;
|
||||
opacity: 0.2;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.goback {
|
||||
width: 72px;
|
||||
height: 17px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 114px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box_1 {
|
||||
width: 150px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
background: #FFA234;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box_2 {
|
||||
width: 200px;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
background: #4EB64B;
|
||||
margin-top: 16px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.pc-nav{
|
||||
margin-left: 83px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
.pc-nav-item {
|
||||
width: 100%;
|
||||
// height: 18px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 0px rgba(0, 0, 64, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 50px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #FFA234;
|
||||
}
|
||||
img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.span {
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
|
||||
&.active {
|
||||
color: #FFA234;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -252,11 +252,11 @@ const router = useRouter()
|
||||
onMounted(() => {
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
// if (coMobile) {
|
||||
// router.push('/phone_index/')
|
||||
// } else {
|
||||
// router.push('/')
|
||||
// }
|
||||
if (coMobile) {
|
||||
router.push('/phone_index/')
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
// let indexs_to = localStorage.getItem('index_detail')
|
||||
// if (indexs_to) {
|
||||
// toswiper(Number(indexs_to));
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
BIN
public/img/guan.png
Normal file
BIN
public/img/guan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/img/index/phone_top.png
Normal file
BIN
public/img/index/phone_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
BIN
public/img/right.png
Normal file
BIN
public/img/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/img/xuan.png
Normal file
BIN
public/img/xuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
x
Reference in New Issue
Block a user