服务项目
This commit is contained in:
jhy
parent
d7091e2b5a
commit
7ca554d080
|
|
@ -11,38 +11,38 @@ const changeHandler = (active) => {
|
|||
<template>
|
||||
<div class="navigation">
|
||||
<div class="menu">
|
||||
<t-head-menu
|
||||
v-model="menu1Value"
|
||||
theme="dark"
|
||||
height="150px"
|
||||
@change="changeHandler"
|
||||
>
|
||||
<template #logo>
|
||||
<div class="text">黑龙江东印科技</div>
|
||||
</template>
|
||||
<t-menu-item value="item1" class="menu"> 首页 </t-menu-item>
|
||||
<t-menu-item value="item2" class="menu"> 服务项目 </t-menu-item>
|
||||
<t-menu-item value="item3" class="menu"> 联系我们 </t-menu-item>
|
||||
<t-head-menu class="menu_shadow" v-model="menu1Value" theme="dark" height="150px" @change="changeHandler">
|
||||
<template #logo>
|
||||
<div class="text">黑龙江东印科技</div>
|
||||
</template>
|
||||
<t-menu-item value="item1" class="menu" to="/"> 首页 </t-menu-item>
|
||||
<t-menu-item value="item2" class="menu" to="/ServicesProject"> 服务项目 </t-menu-item>
|
||||
<t-menu-item value="item3" class="menu"> 联系我们 </t-menu-item>
|
||||
</t-head-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navigation {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.navigation{
|
||||
width: 100vw;
|
||||
}
|
||||
.text{
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
margin-left: 450px;
|
||||
margin-right: 600px;
|
||||
}
|
||||
.t-menu__item.t-is-active{
|
||||
background-color:#88888863
|
||||
}
|
||||
|
||||
.menu_shadow {
|
||||
box-shadow: 0px -7px 50px 0px orange;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
margin-left: 450px;
|
||||
margin-right: 600px;
|
||||
}
|
||||
|
||||
.t-menu__item.t-is-active {
|
||||
background-color: #88888863
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,8 +10,6 @@
|
|||
<style scoped>
|
||||
.footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
height: 150px;
|
||||
background-color: black;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import ServicesProject from "../views/ServicesProject.vue"
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -9,6 +10,11 @@ const router = createRouter({
|
|||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/ServicesProject',
|
||||
name: 'project',
|
||||
component: ServicesProject
|
||||
}
|
||||
// {
|
||||
// path: '/about',
|
||||
// name: 'about',
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@ const image = [
|
|||
{ url: 'https://yingyongge.com/zb_users/theme/FY_Qo/style/images/2.jpg', text: "小程序开发" },
|
||||
{ url: 'https://yingyongge.com/zb_users/theme/FY_Qo/style/images/3.jpg', text: "企业网站开发" },
|
||||
]
|
||||
const projectlist = [
|
||||
{ text: "APP软件开发", icon: "system-marked" },
|
||||
{ text: "小程序开发", icon: "system-messages" },
|
||||
{ text: "网站开发", icon: "system-messages" }
|
||||
]
|
||||
const images = ref(image)
|
||||
const project_list = ref(projectlist)
|
||||
const text = ref('APP软件开发')
|
||||
|
||||
</script>
|
||||
|
|
@ -34,16 +40,19 @@ const text = ref('APP软件开发')
|
|||
<span>1111</span>
|
||||
</div>
|
||||
<div class="special_service_type">
|
||||
<div class="special_service_typeone">
|
||||
<div class="special_service_typeone" v-for="(item, index) in project_list" :key="index">
|
||||
<!-- 圆圈 -->
|
||||
<div class="special_service_yuan">
|
||||
<!-- 图标 -->
|
||||
<span class="icon">
|
||||
<icon name="system-marked" color="orange" style="color:orange;" />
|
||||
<icon :name="item.icon" color="orange" style="color:orange;" />
|
||||
</span>
|
||||
</div>
|
||||
<span class="special_service_wenzi"><strong>APP软件开发</strong></span>
|
||||
<!-- 文字 -->
|
||||
<span class="special_service_wenzi"><strong>{{ item.text }}</strong></span>
|
||||
</div>
|
||||
|
||||
<div class="special_service_typeone">
|
||||
<!-- <div class="special_service_typeone">
|
||||
<div class="special_service_yuan">
|
||||
<span class="icon">
|
||||
<icon name="system-code" color="orange" />
|
||||
|
|
@ -59,7 +68,7 @@ const text = ref('APP软件开发')
|
|||
</span>
|
||||
</div>
|
||||
<span class="special_service_wenzi"><strong>网站开发</strong></span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -119,9 +128,10 @@ const text = ref('APP软件开发')
|
|||
}
|
||||
|
||||
.special_service {
|
||||
/* height: 500px; */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
padding: 60px;
|
||||
padding: 60px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -151,7 +161,6 @@ const text = ref('APP软件开发')
|
|||
}
|
||||
|
||||
.special_service_type {
|
||||
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
|
|||
45
src/views/ServicesProject.vue
Normal file
45
src/views/ServicesProject.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script>
|
||||
import pagefooter from '../components/pagefooter/pagefooter.vue'
|
||||
export default {
|
||||
components: { pagefooter },
|
||||
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="body">
|
||||
<div class=" content">
|
||||
<div class="content_text"><strong>服务项目</strong></div>
|
||||
<div class="content_des"></div>
|
||||
</div>
|
||||
<pagefooter></pagefooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 530px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.content_text {
|
||||
font-size: 30px;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
}
|
||||
|
||||
.content_des {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user