Skip to content

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

update

上级 6390b951
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 838 行增加 和 44 行删除
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/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" /> <img :src="item.picture" />
<div class="content"> <div class="title">{{ item.title }}</div>
<div class="tit">{{ item.title }}</div> <div class="remark">
<div class="desc">{{ item.remark }}</div> {{ item.remark || item.comment }}
</div>
</div>
<div class="z-t-card" v-if="listData.layout == '1'">
<img :src="item.picture" />
<div class="content">
<div class="title">{{ item.title }}</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) {
this.$router.push({ path: '/details', query: { id: row.id } }) if (row.url === '') {
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 {
} background: #ffffff;
.main-content { box-shadow: 0px 4px 12px 0px rgba(2, 17, 44, 0.05);
.course-list { border-radius: 0.08rem;
padding-bottom: 1.3rem; padding: 0.32rem;
.item-li { margin-bottom: 0.16rem;
background: #ffffff; img {
border-radius: 0.2rem; width: 100%;
padding: 0.2rem; display: block;
display: flex; border-radius: 0.08rem;
margin-bottom: 0.3rem; }
img { .title {
width: 2.2rem; font-size: 0.28rem;
height: 2.2rem; color: #212121;
border-radius: 0.2rem; 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;
} }
.content { .remark {
margin-left: 0.28rem; font-size: 0.24rem;
.tit { color: #999999;
padding-top: 0.2rem; margin-top: 0.1rem;
font-size: 0.3rem;
font-weight: bold;
color: #454545;
}
.desc {
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;
}
}
} }
</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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论