Skip to content

P
project-road-h5
提交 068d24b0 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 6390b951
显示空白字符变更
内嵌 并排
正在显示 包含 1052 行增加 和 130 行删除
src/assets/css/base.css
浏览文件 @ 068d24b0
...@@ -7,5 +7,7 @@ html{ ...@@ -7,5 +7,7 @@ html{
margin: 0 auto; margin: 0 auto;
} }
body { body {
background: #f7f7f7; /* background: #f7f7f7; */
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/body-bg.png) repeat-y;
background-size: cover;
} }
src/components/Foot.vue 0 → 100644
浏览文件 @ 068d24b0
<template>
<div class="foot-box">
<div :class="$route.path == '/' ? 'item active' : 'item'" @click="$router.push('/')">
<div class="icon"></div>
<div class="nav-t">首页</div>
</div>
<div :class="$route.path == '/message' ? 'item active' : 'item'" @click="$router.push('/message')">
<div class="icon"></div>
<div class="nav-t">消息</div>
</div>
<div :class="$route.path == '/contact' ? 'item active' : 'item'" @click="$router.push('/contact')">
<div class="icon"></div>
<div class="nav-t">联系我们</div>
</div>
<div :class="$route.path == '/my' ? 'item active' : 'item'" @click="$router.push('/my')">
<div class="icon"></div>
<div class="nav-t">我的</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.foot-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.98rem;
background: #ffffff;
box-shadow: 0px -2px 6px -2px rgba(0, 0, 0, 0.12);
display: flex;
justify-content: space-around;
align-items: center;
.item {
&.active {
.nav-t {
color: #293176;
}
}
&:nth-child(1) {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-ihome.png);
}
&.active {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-ihome-active.png);
}
}
}
&:nth-child(2) {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-imes.png);
}
&.active {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-imes-active.png);
}
}
}
&:nth-child(3) {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-ilxwm.png);
}
&.active {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-ilxwm-active.png);
}
}
}
&:nth-child(4) {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-imy.png);
}
&.active {
.icon {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-imy-active.png);
}
}
}
.icon {
width: 0.48rem;
height: 0.48rem;
margin: 0 auto;
background-size: 100% 100%;
}
.nav-t {
text-align: center;
font-size: 0.2rem;
line-height: 100%;
color: #999999;
margin-top: 0.1rem;
}
}
}
</style>
src/components/HeadBack.vue 0 → 100644
浏览文件 @ 068d24b0
<template>
<div class="head-back">
<van-icon name="arrow-left" @click="$router.go(-1)" />
<div class="text">{{ title || '' }}</div>
</div>
</template>
<script>
export default {
props: {
title: { type: String }
}
}
</script>
<style lang="scss" scoped>
.head-back {
width: 100%;
height: 0.88rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
position: fixed;
.text {
text-align: center;
font-size: 0.34rem;
color: #212121;
line-height: 0.88rem;
}
i {
position: absolute;
top: 50%;
left: 0.3rem;
transform: translateY(-50%);
font-size: 0.38rem;
color: #696969;
}
}
</style>
src/modules/contact/index.js 0 → 100644
浏览文件 @ 068d24b0
const routes = [
{
path: '/contact',
component: () => import('./views/Index.vue')
}
]
export { routes }
src/modules/contact/views/Index.vue 0 → 100644
浏览文件 @ 068d24b0
<template>
<div>
<div class="contact-box">
<div class="item" v-for="(item, index) in data" :key="index">
<img
:src="item.icon"
class="icon"
/>
<div class="info">
<div class="t">{{ item.t }}</div>
<div class="b">{{ item.b }}</div>
</div>
</div>
</div>
<Foot></Foot>
</div>
</template>
<script>
import Foot from '@/components/Foot.vue'
export default {
components: {
Foot
},
data() {
return {
data: [
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/contact-i1.png',
t: '咨询处',
b: '010-64868878 转 832'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/contact-i2.png',
t: '手机',
b: '18814899321'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/contact-i3.png',
t: '传真号码',
b: '010-64868861'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/contact-i4.png',
t: '协会地址',
b: '北京市朝阳区大屯路科学园南里风林西奥中心B座14层'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/contact-i5.png',
t: '邮编',
b: '100101'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/contact-i6.png',
t: '邮箱',
b: '386658303@qq.com'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.contact-box {
width: 6.86rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.16rem;
margin: 0.32rem auto;
padding: 0.56rem 0.54rem 0.6rem 0.32rem;
box-sizing: border-box;
.item {
display: flex;
margin-bottom: .45rem;
}
.icon {
width: 0.64rem;
height: 0.64rem;
}
.info {
margin-left: 0.32rem;
.t {
padding-top: 0.18rem;
font-size: 0.28rem;
color: #999999;
line-height: 100%;
}
.b {
font-size: 0.28rem;
color: #696969;
margin-top: 0.15rem;
}
}
}
</style>
src/modules/home/components/List.vue 0 → 100644
浏览文件 @ 068d24b0
<template>
<div>
<div class="list-card" v-for="(item, index) in data" :key="index">
<div class="list-head-box">
<div class="title">{{ item.title }}</div>
<div class="more" @click="goList(item)">
<div class="text">查看更多</div>
<van-icon name="arrow" />
</div>
</div>
<div v-for="docs in item.docs" :key="docs.id">
<div class="s-t-card" v-if="item.layout == '2'" @click="goDetail(docs)">
<img :src="docs.picture" />
<div class="title">{{ docs.title }}</div>
<div class="remark">
{{ docs.remark || docs.comment }}
</div>
</div>
<div class="z-t-card" v-if="item.layout == '1'" @click="goDetail(docs)">
<img :src="docs.picture" />
<div class="content">
<div class="title">{{ docs.title }}</div>
<div class="remark">
{{ docs.remark || docs.comment }}
</div>
</div>
</div>
<div class="text-card" v-if="item.layout == '3'" @click="goDetail(docs)">
<div class="title">{{ docs.title }}</div>
<div class="remark">
{{ docs.remark || docs.comment }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Array }
},
methods: {
goList(row) {
this.$router.push({ path: '/list', query: { id: row.id } })
},
goDetail(row) {
this.$router.push({ path: '/details', query: { id: row.id } })
}
}
}
</script>
<style lang="scss" scoped>
.list-card {
.list-head-box {
padding: 0.32rem 0;
}
.s-t-card {
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.08rem;
padding: 0.32rem;
margin-bottom: 0.16rem;
img {
width: 100%;
display: block;
border-radius: 0.08rem;
}
.title {
font-size: 0.28rem;
color: #212121;
line-height: 0.4rem;
margin-top: 0.2rem;
}
.remark {
font-size: 0.24rem;
color: #999999;
line-height: 0.34rem;
margin-top: 0.16rem;
}
}
.z-t-card {
padding: 0.32rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.08rem;
display: flex;
margin-bottom: 0.16rem;
img {
width: 1.92rem;
border-radius: 0.08rem;
}
.content {
margin-left: 0.24rem;
.title {
font-size: 0.28rem;
color: #212121;
line-height: 0.4rem;
}
.remark {
font-size: 0.24rem;
color: #999999;
margin-top: 0.1rem;
}
}
}
.text-card {
padding: 0.32rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.08rem;
.title {
font-size: 0.28rem;
color: #212121;
line-height: 0.4rem;
}
.remark {
font-size: 0.24rem;
color: #999999;
margin-top: 0.1rem;
}
}
}
.list-head-box {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 0.36rem;
color: #212121;
line-height: 100%;
}
.more {
display: flex;
align-items: center;
.text {
font-size: 0.24rem;
color: rgba(0, 0, 0, 0.45);
line-height: 100%;
}
i {
font-size: 0.16rem;
color: rgba(0, 0, 0, 0.45);
}
}
}
</style>
src/modules/home/views/Details.vue
浏览文件 @ 068d24b0
<template> <template>
<div class="main"> <div class="main">
<HeadBack title="详情"></HeadBack>
<div class="main_content"> <div class="main_content">
<div class="show_content"> <div class="show_content">
<div class="show_content_img" v-html="data.content"></div> <div class="show_content_img" v-html="data.content"></div>
...@@ -10,7 +11,11 @@ ...@@ -10,7 +11,11 @@
<script> <script>
import { getDocDetails } from '../api' import { getDocDetails } from '../api'
import HeadBack from '@/components/HeadBack.vue'
export default { export default {
components: {
HeadBack
},
data() { data() {
return { return {
data: {} data: {}
...@@ -31,11 +36,10 @@ export default { ...@@ -31,11 +36,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
background: #f7f7f7;
.main_content { .main_content {
padding: 1.2rem 0.32rem;
.show_content { .show_content {
.show_content_img { .show_content_img {
padding: .2rem;
// width: 6.9rem; // width: 6.9rem;
::v-deep { ::v-deep {
p { p {
......
src/modules/home/views/Index.vue
浏览文件 @ 068d24b0
<template> <template>
<div class="home-main"> <div class="home-main">
<!-- banner -->
<div class="banner-box"> <div class="banner-box">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item <van-swipe-item
...@@ -10,41 +11,76 @@ ...@@ -10,41 +11,76 @@
></van-swipe-item> ></van-swipe-item>
</van-swipe> </van-swipe>
</div> </div>
<!-- 菜单 -->
<div class="menu-box"> <div class="menu-box">
<div @click="goPage(item)" class="item" v-for="item in homeData.menu_list" :key="item.id"> <div @click="goPage(item)" class="item" v-for="item in homeData.menu_list" :key="item.id">
<div class="icon" :style="`background-image: url(${item.picture});`"></div> <div class="icon" :style="`background-image: url(${item.picture});`"></div>
<div class="menu-t">{{ item.title }}</div> <div class="menu-t">{{ item.title }}</div>
</div> </div>
</div> </div>
<div class="main-content" v-for="item in homeData.page_list" :key="item.id"> <!-- 主要内容 -->
<div class="title">推荐课程</div> <div class="home-main-content">
<div class="course-list"> <!-- 培训动态 -->
<div class="item-li" v-for="cItem in item.docs" :key="cItem.id" @click="goDetails(cItem)"> <div class="training-dynamic">
<img :src="cItem.picture" /> <div class="list-head-box">
<div class="content"> <div class="title">培训动态</div>
<div class="tit">{{ cItem.title }}</div> <div class="more" @click="goDynamicPage">
<div class="desc">{{ cItem.remark }}</div> <div class="text">查看更多</div>
<van-icon name="arrow" />
</div> </div>
</div> </div>
<div class="card-message">
<div class="icon"></div>
<div class="text">关于举办2022年度中级注册安全工程师考前…</div>
</div> </div>
<div class="card-entrance">
<div class="left-card">
<div class="title">学习平台</div>
<div class="desc">系统专业知识</div>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/home-dt-t1.png" />
<div class="go-look">
<div class="t">去看看</div>
<van-icon name="arrow" />
</div> </div>
<div class="foot-box">
<div class="item">
<div class="icon"></div>
<div class="nav-t">首页</div>
</div> </div>
<div class="item"> <div class="right-card">
<div class="icon"></div> <div class="r-t-card">
<div class="nav-t">我的</div> <div class="title">证书查询</div>
<div class="desc">登录后即可查询</div>
<div class="go-look">
<div class="t">去看看</div>
<van-icon name="arrow" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/home-dt-t2.png" />
</div>
</div>
<div class="r-t-card r-b-card">
<div class="title">继续教育</div>
<div class="desc">个人提升入口</div>
<div class="go-look">
<div class="t">去看看</div>
<van-icon name="arrow" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/home-dt-t3.png" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<List :data="homeData.page_list"></List>
</div>
<Foot></Foot>
</div>
</template> </template>
<script> <script>
import { Toast } from 'vant' import { Toast } from 'vant'
import { getHomeInfo } from '../api' import { getHomeInfo } from '../api'
import List from '../components/List.vue'
import Foot from '@/components/Foot.vue'
export default { export default {
components: {
List,
Foot
},
data() { data() {
return { return {
homeData: {} homeData: {}
...@@ -69,12 +105,19 @@ export default { ...@@ -69,12 +105,19 @@ export default {
window.location.href = row.url window.location.href = row.url
break break
} }
} else {
if (row.type === '3') {
window.location.href = row.url
} else { } else {
Toast('暂未开通') Toast('暂未开通')
} }
}
}, },
goDetails(row) { goDetails(row) {
this.$router.push({ path: '/details', query: { id: row.id } }) this.$router.push({ path: '/details', query: { id: row.id } })
},
goDynamicPage() {
window.location.href = 'https://pages.ezijing.com/prp/mobile2140014905177.html'
} }
}, },
mounted() { mounted() {
...@@ -84,134 +127,219 @@ export default { ...@@ -84,134 +127,219 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep {
.van-swipe__indicators {
top: 3.4rem !important;
}
}
.my-swipe .van-swipe-item { .my-swipe .van-swipe-item {
color: #fff; color: #fff;
text-align: center; text-align: center;
height: 3rem; height: 5.92rem;
// background-color: #39a9ed; // background-color: #39a9ed;
} }
.home-main { .home-main {
background: #f7f7f7; // background: #f7f7f7;
padding: 0.3rem 0.3rem 0; // padding: 0.3rem 0.3rem 0;
.banner-box { .banner-box {
border-radius: 8px; height: 5.42rem;
border-radius: 0 0 100rem 100rem/0 0 8rem 8rem;
overflow: hidden; overflow: hidden;
} }
} }
.menu-box { .menu-box {
position: absolute;
top: 4rem;
left: 50%;
transform: translateX(-50%);
width: 6.86rem;
height: 2.36rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/menu-bg.png);
background-size: 100% 100%;
display: flex; display: flex;
justify-content: space-around; padding-left: 0.64rem;
box-sizing: border-box;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
.item { .item {
padding-top: 0.3rem; height: fit-content;
position: relative;
margin-right: 0.8rem;
margin-top: 0.5rem;
.icon { .icon {
width: 0.88rem; width: 0.8rem;
height: 0.88rem; height: 0.8rem;
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
} }
.menu-t { .menu-t {
font-size: 0.24rem; position: absolute;
left: 50%;
bottom: -0.48rem;
transform: translateX(-50%);
font-size: 0.26rem;
line-height: 100%; line-height: 100%;
text-align: center; text-align: center;
color: #666666; color: #696969;
margin-top: 0.2rem; white-space: nowrap;
} }
} }
} }
.foot-box {
position: fixed; .home-main-content {
bottom: 0; padding: 1rem 0.32rem 1.5rem;
left: 0; .training-dynamic {
width: 100%; padding-top: 0.48rem;
height: 0.98rem; .card-entrance {
background: #fff;
border-top: 1px solid #e6e6e6;
display: flex; display: flex;
justify-content: space-around; padding-top: 0.32rem;
align-items: center; justify-content: space-between;
.item { .right-card {
&:nth-child(1) { .r-b-card {
.icon { margin-top: 0.16rem;
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-home.png);
} }
&.acitve { .r-t-card {
.icon { width: 3.34rem;
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-home-active.png); height: 2.08rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.16rem;
position: relative;
.title {
font-size: 0.36rem;
color: #212121;
line-height: 100%;
padding: 0.32rem 0 0 0.32rem;
} }
.desc {
font-size: 0.24rem;
color: #999999;
line-height: 100%;
padding-top: 0.2rem;
padding-left: 0.32rem;
} }
img {
position: absolute;
top: 0;
right: 0;
width: 1.44rem;
} }
&:nth-child(2) { .go-look {
.icon { display: flex;
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-my.png); align-items: center;
margin-top: 0.2rem;
margin-left: 0.32rem;
.t {
font-size: 0.24rem;
color: #e5b07d;
line-height: 100%;
} }
&.acitve { i {
.icon { font-size: 0.16rem;
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/foot-my-active.png); color: #e5b07d;
margin-left: 0.03rem;
} }
} }
} }
.icon {
width: 0.5rem;
height: 0.5rem;
margin: 0 auto;
background-size: 100% 100%;
} }
.nav-t { .left-card {
text-align: center; width: 3.36rem;
font-size: 0.2rem; height: 4.32rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.16rem;
position: relative;
.title {
font-size: 0.36rem;
color: #212121;
line-height: 100%; line-height: 100%;
padding: 0.32rem 0 0 0.32rem;
}
.desc {
font-size: 0.24rem;
color: #999999; color: #999999;
margin-top: 0.1rem; line-height: 100%;
padding-top: 0.2rem;
padding-left: 0.32rem;
} }
img {
width: 3.36rem;
height: 3rem;
display: block;
margin-top: 0.2rem;
} }
} .go-look {
.main-content { display: flex;
padding-top: 0.56rem; align-items: center;
.title {
font-size: 0.3rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding-left: 0.2rem;
position: relative;
&::after {
content: '';
position: absolute; position: absolute;
top: 0; top: 1.42rem;
left: 0; left: 0.32rem;
width: 0.06rem; .t {
height: 0.3rem; font-size: 0.24rem;
background: #5296f5; color: #e5b07d;
border-radius: 0.03rem; line-height: 100%;
} }
i {
font-size: 0.16rem;
color: #e5b07d;
margin-left: 0.03rem;
} }
.course-list { }
padding-bottom: 1.3rem; }
.item-li { }
.card-message {
height: 0.96rem;
background: #ffffff; background: #ffffff;
border-radius: 0.2rem; box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
padding: 0.2rem; border-radius: 0.16rem;
margin-top: 0.32rem;
display: flex; display: flex;
margin-top: 0.3rem; align-items: center;
img { padding-left: 0.32rem;
width: 2.2rem; box-sizing: border-box;
height: 2.2rem; .icon {
border-radius: 0.2rem; width: 0.4rem;
height: 0.4rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/home-horn.png);
background-size: 100% 100%;
} }
.content { .text {
margin-left: 0.28rem; font-size: 0.28rem;
.tit { color: #212121;
padding-top: 0.2rem; line-height: 100%;
font-size: 0.3rem; margin-left: 0.15rem;
font-weight: bold; overflow: hidden;
color: #454545; text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
} }
.desc {
font-size: 0.24rem;
color: #999999;
margin-top: 0.1rem;
} }
} }
}
.list-head-box {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 0.36rem;
color: #212121;
line-height: 100%;
}
.more {
display: flex;
align-items: center;
.text {
font-size: 0.24rem;
color: rgba(0, 0, 0, 0.45);
line-height: 100%;
}
i {
font-size: 0.16rem;
color: rgba(0, 0, 0, 0.45);
} }
} }
} }
......
src/modules/home/views/List.vue
浏览文件 @ 068d24b0
<template> <template>
<div class="home-main"> <div class="list-page">
<div class="main-content"> <HeadBack :title="listData.title"></HeadBack>
<div class="course-list"> <div class="list-card" v-for="(item, index) in listData.docs" :key="index" @click="goPage(item)">
<div class="item-li" v-for="item in list" :key="item.id" @click="goPage(item)"> <div class="s-t-card" v-if="listData.layout == '2'">
<img :src="item.picture" />
<div class="title">{{ item.title }}</div>
<div class="remark">
{{ item.remark || item.comment }}
</div>
</div>
<div class="z-t-card" v-if="listData.layout == '1'">
<img :src="item.picture" /> <img :src="item.picture" />
<div class="content"> <div class="content">
<div class="tit">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="desc">{{ item.remark }}</div> <div class="remark">
{{ item.remark || item.comment }}
</div> </div>
</div> </div>
</div> </div>
<div class="text-card" v-if="listData.layout == '3'">
<div class="title">{{ item.title }}</div>
<div class="remark">
{{ item.remark || item.comment }}
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getPageList } from '../api' import { getPageList } from '../api'
import HeadBack from '@/components/HeadBack.vue'
export default { export default {
components: {
HeadBack
},
data() { data() {
return { return {
list: [] listData: {}
} }
}, },
methods: { methods: {
getHomeInfo() { getHomeInfo() {
getPageList({ id: this.$route.query.id }).then(res => { getPageList({ id: this.$route.query.id }).then(res => {
this.list = res.data.docs this.listData = res.data
}) })
}, },
goPage(row) { goPage(row) {
if (row.url === '') {
this.$router.push({ path: '/details', query: { id: row.id } }) this.$router.push({ path: '/details', query: { id: row.id } })
} else {
window.location.href = row.url
}
} }
}, },
mounted() { mounted() {
...@@ -39,39 +61,72 @@ export default { ...@@ -39,39 +61,72 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home-main { .list-card {
background: #f7f7f7; padding: 1.2rem 0.32rem;
padding: 0.3rem 0.3rem 0; .s-t-card {
}
.main-content {
.course-list {
padding-bottom: 1.3rem;
.item-li {
background: #ffffff; background: #ffffff;
border-radius: 0.2rem; box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
padding: 0.2rem; border-radius: 0.08rem;
padding: 0.32rem;
margin-bottom: 0.16rem;
img {
width: 100%;
display: block;
border-radius: 0.08rem;
}
.title {
font-size: 0.28rem;
color: #212121;
line-height: 0.4rem;
margin-top: 0.2rem;
}
.remark {
font-size: 0.24rem;
color: #999999;
line-height: 0.34rem;
margin-top: 0.16rem;
}
}
.z-t-card {
padding: 0.32rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.08rem;
display: flex; display: flex;
margin-bottom: 0.3rem; margin-bottom: 0.16rem;
img { img {
width: 2.2rem; width: 1.92rem;
height: 2.2rem; border-radius: 0.08rem;
border-radius: 0.2rem;
} }
.content { .content {
margin-left: 0.28rem; margin-left: 0.24rem;
.tit { .title {
padding-top: 0.2rem; font-size: 0.28rem;
font-size: 0.3rem; color: #212121;
font-weight: bold; line-height: 0.4rem;
color: #454545; }
} .remark {
.desc {
font-size: 0.24rem; font-size: 0.24rem;
color: #999999; color: #999999;
margin-top: 0.1rem; margin-top: 0.1rem;
} }
} }
} }
.text-card {
padding: 0.32rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.08rem;
.title {
font-size: 0.28rem;
color: #212121;
line-height: 0.4rem;
}
.remark {
font-size: 0.24rem;
color: #999999;
margin-top: 0.1rem;
}
} }
} }
</style> </style>
src/modules/message/api.js 0 → 100644
浏览文件 @ 068d24b0
import httpRequest from '@/utils/axios'
// 获取用户信息
export function getUser() {
return httpRequest.get('/api/passport/account/get-user-info')
}
// 获取首页信息
export function getHomeInfo(params) {
return httpRequest.get('/api/road/v1/frontend/index/index', { params })
}
// 获取页面列表
export function getPageList(params) {
return httpRequest.get('/api/road/v1/frontend/index/page-view', { params })
}
// 获取列表详情
export function getDocDetails(params) {
return httpRequest.get('/api/road/v1/frontend/index/doc-view', { params })
}
src/modules/message/index.js 0 → 100644
浏览文件 @ 068d24b0
const routes = [
{
path: '/message',
component: () => import('./views/Index.vue')
}
]
export { routes }
src/modules/message/views/Index.vue 0 → 100644
浏览文件 @ 068d24b0
<template>
<div>
<div class="message-box">
<div class="empty-box" v-if="false">
<div class="empty-content">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/msg-img.png" />
<div class="text">暂无消息</div>
</div>
</div>
<div class="msg-list">
<div class="item-card">
<div class="title">矩形顶管机掘进技术交流会</div>
<div class="desc">
2022年8月4日“矩形顶管机掘进技术交流会”在北京市轨道交通昌平线南延工程土建施工06合同段上清桥站项目部举办。
</div>
</div>
<div class="item-card">
<div class="title">矩形顶管机掘进技术交流会</div>
<div class="desc">
2022年8月4日“矩形顶管机掘进技术交流会”在北京市轨道交通昌平线南延工程土建施工06合同段上清桥站项目部举办。
</div>
</div>
</div>
</div>
<Foot></Foot>
</div>
</template>
<script>
import Foot from '@/components/Foot.vue'
export default {
components: {
Foot
}
}
</script>
<style lang="scss" scoped>
.empty-box {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
.empty-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
.text {
font-size: 0.28rem;
color: #999999;
line-height: 0.4rem;
text-align: center;
}
}
}
.msg-list {
padding: 0.32rem 0.32rem 1.2rem;
.item-card {
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
border-radius: 0.16rem;
padding: 0.32rem;
box-sizing: border-box;
margin-bottom: 0.32rem;
.title {
font-size: 0.32rem;
color: #212121;
line-height: 0.44rem;
}
.desc {
font-size: 0.28rem;
color: #999999;
line-height: 0.44rem;
}
}
}
</style>
src/modules/my/api.js 0 → 100644
浏览文件 @ 068d24b0
import httpRequest from '@/utils/axios'
// 获取用户信息
export function getUser() {
return httpRequest.get('/api/passport/account/get-user-info')
}
// 获取首页信息
export function getHomeInfo(params) {
return httpRequest.get('/api/road/v1/frontend/index/index', { params })
}
// 获取页面列表
export function getPageList(params) {
return httpRequest.get('/api/road/v1/frontend/index/page-view', { params })
}
// 获取列表详情
export function getDocDetails(params) {
return httpRequest.get('/api/road/v1/frontend/index/doc-view', { params })
}
src/modules/my/index.js 0 → 100644
浏览文件 @ 068d24b0
const routes = [
{
path: '/my',
component: () => import('./views/Index.vue')
}
]
export { routes }
src/modules/my/views/Index.vue 0 → 100644
浏览文件 @ 068d24b0
<template>
<div>
<div class="my-box">
<div class="info-top">
<div class="l-info">
<div class="name">{{ data.nickname || data.username }}</div>
<div class="emit">386658303@qq.com</div>
</div>
<img :src="data.avatar" class="avatar" />
</div>
<div class="operation">
<div class="order-box">
<div class="head">
<div class="t">订单中心</div>
<div class="all">
<div class="txt">查看全部订单</div>
<van-icon name="arrow" />
</div>
</div>
<div class="main">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/my-order-i1.png" />
<div class="text">未完成</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/my-order-i2.png" />
<div class="text">已完成</div>
</div>
</div>
</div>
<div class="invoice-box">
<div class="t">发票中心</div>
<div class="all">
<div class="txt">发票信息</div>
<van-icon name="arrow" />
</div>
</div>
<div class="order-box">
<div class="head">
<div class="t">订单中心</div>
</div>
<div class="main">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/my-cert-i1.png" />
<div class="text">查自己</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/my-cert-i2.png" />
<div class="text">查他人</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/my-cert-i3.png" />
<div class="text">完善证书信息</div>
</div>
</div>
</div>
<div class="sign-out">退出登录</div>
</div>
</div>
<Foot></Foot>
</div>
</template>
<script>
import Foot from '@/components/Foot.vue'
import { getUser } from '@/api/base.js'
export default {
components: {
Foot
},
data() {
return {
data: {}
}
},
mounted() {
getUser().then(res => {
this.data = res.data
})
}
}
</script>
<style lang="scss" scoped>
.my-box {
.info-top {
height: 4rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/my-bg.png);
background-size: 100% 100%;
display: flex;
justify-content: space-around;
.l-info {
.name {
margin-top: 0.9rem;
font-size: 0.4rem;
color: #ffffff;
line-height: 0.56rem;
}
.emit {
font-size: 0.28rem;
color: rgba(255, 255, 255, 0.85);
line-height: 0.4rem;
margin-top: 0.14rem;
}
}
.avatar {
width: 1.6rem;
height: 1.6rem;
display: block;
border-radius: 50%;
margin-top: 0.64rem;
}
}
.operation {
position: absolute;
top: 2.88rem;
left: 50%;
transform: translateX(-50%);
width: 6.86rem;
padding-bottom: 1rem;
.order-box {
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.02);
border-radius: 0.16rem;
.head {
display: flex;
padding: 0.4rem 0.32rem;
align-items: center;
justify-content: space-between;
.t {
font-size: 0.32rem;
color: #212121;
line-height: 100%;
}
.all {
display: flex;
.txt {
font-size: 0.24rem;
color: #999999;
line-height: 100%;
}
i {
font-size: 0.16rem;
color: #999999;
}
}
}
.main {
display: flex;
justify-content: space-around;
padding: 0.12rem 0 0.48rem;
.item {
img {
width: 0.72rem;
display: block;
margin: 0 auto;
}
.text {
text-align: center;
font-size: 0.26rem;
color: #696969;
line-height: 0.36rem;
}
}
}
}
.invoice-box {
height: 1.08rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.02);
border-radius: 0.16rem;
margin: 0.16rem 0;
padding: 0 0.32rem;
display: flex;
align-items: center;
justify-content: space-between;
.t {
font-size: 0.32rem;
color: #212121;
}
.all {
display: flex;
.txt {
font-size: 0.24rem;
color: #999999;
line-height: 100%;
}
i {
font-size: 0.16rem;
color: #999999;
}
}
}
.sign-out {
width: 5.9rem;
line-height: 0.72rem;
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.02);
border-radius: 0.4rem;
margin: 0.48rem auto;
font-size: 0.28rem;
color: #696969;
text-align: center;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论