联系我们

This commit is contained in:
李四 2023-09-05 10:41:39 +08:00
commit 6e29d59305
4 changed files with 96 additions and 40 deletions

View File

@ -12,38 +12,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" to="/"> 首页 </t-menu-item>
<t-menu-item value="item2" class="menu" > 服务项目 </t-menu-item>
<t-menu-item value="item3" class="menu" to="contact"> 联系我们 </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="/" to="/"> 首页 </t-menu-item>
<t-menu-item value="item2" class="menu" to="/ServicesProject"> 服务项目 </t-menu-item>
<t-menu-item value="item3" class="menu" to="contact"> 联系我们 </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>

View File

@ -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:'/contact',
name:'contact',

View File

@ -7,7 +7,14 @@ 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>
@ -32,23 +39,25 @@ const images = ref(image)
<span class="special_service_dec_top">专注高端定制与设计的网站建设工作室,我们是体验经济世界的构筑者,我们创造有价值的精彩体验</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" />
</span>
</div>
<span class="special_service_wenzi"><strong>小程序开发</strong></span>
</div>
</div>
</div>
<div class="special_service_typeone">
<div class="special_service_yuan">
@ -57,11 +66,7 @@ const images = ref(image)
</span>
</div>
<span class="special_service_wenzi"><strong>网站开发</strong></span>
</div>
</div>
</div>
</div>
</div> -->
</template>
@ -116,7 +121,7 @@ const images = ref(image)
.special_service {
background-color: #f5f5f5;
padding: 60px;
padding: 60px 0px;
display: flex;
flex-direction: column;
align-items: center;

View 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>