liguoqiang/guanwang
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

联系我们

Browse Source
This commit is contained in:
李四 2023-09-05 10:29:47 +08:00
parent d7091e2b5a
commit 0f62546654
6 changed files with 92 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.vue
View File

@ -1,7 +1,6 @@
<script setup>
import navigation from './components/navigation/index.vue'
// import footer from './components/footer/footer.vue';
import pageFooter from './components/pageFooter/pageFooter.vue'
</script>
<template>
@ -9,12 +8,14 @@ import navigation from './components/navigation/index.vue'
<RouterView />
<!-- <footer></footer> -->
<pageFooter />
</template>
<style>
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}

7
src/components/navigation/index.vue
View File

@ -6,6 +6,7 @@ const menu1Value = ref('item1');
const changeHandler = (active) => {
console.log('change', active);
};
</script>
<template>
@ -20,9 +21,9 @@ const changeHandler = (active) => {
<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-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>
</div>
</div>

6
src/components/footer/footer.vue → src/components/pageFooter/pageFooter.vue
View File

@ -2,16 +2,14 @@
</script>
<template>
<footer class="footer">
<div class="footer">
<span>鄂ICP备2023000527</span>
<span><span class="hui">2023</span> <strong>黑龙江东印科技</strong> <span class="hui">版权所有</span></span>
</footer>
</div>
</template>
<style scoped>
.footer {
width: 100%;
position: fixed;
bottom: 0px;
text-align: center;
height: 150px;
background-color: black;

5
src/router/index.js
View File

@ -9,6 +9,11 @@ const router = createRouter({
name: 'home',
component: HomeView
},
{
path:'/contact',
name:'contact',
component:()=> import('../views/contact.vue')
}
// {
// path: '/about',
// name: 'about',

36
src/views/HomeView.vue
View File

@ -8,7 +8,6 @@ const image = [
{ url: 'https://yingyongge.com/zb_users/theme/FY_Qo/style/images/3.jpg', text: "企业网站开发" },
]
const images = ref(image)
const text = ref('APP软件开发')
</script>
@ -31,7 +30,6 @@ const text = ref('APP软件开发')
<h1 class="special_service_text">特色服务</h1>
<div class="special_service_dec">
<span class="special_service_dec_top">专注高端定制与设计的网站建设工作室,我们是体验经济世界的构筑者,我们创造有价值的精彩体验</span>
<span>1111</span>
</div>
<div class="special_service_type">
<div class="special_service_typeone">
@ -65,14 +63,12 @@ const text = ref('APP软件开发')
</div>
</div>
<footer class="footer">
<span>鄂ICP备2023000527</span>
<span><span class="hui">2023</span> <strong>黑龙江东印科技</strong> <span class="hui">版权所有</span></span>
</footer>
</template>
<style scoped>
.home {
width: 100vw;
box-sizing: border-box;
/* height: 100vh; */
}
@ -119,14 +115,12 @@ const text = ref('APP软件开发')
}
.special_service {
/* height: 500px; */
background-color: #f5f5f5;
padding: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
margin-bottom: 10px;
}
.special_service_text {
@ -151,12 +145,10 @@ const text = ref('APP软件开发')
}
.special_service_type {
width: 60%;
display: flex;
justify-content: space-around;
align-items: center;
/* background-color: beige; */
}
.special_service_yuan {
@ -165,7 +157,7 @@ const text = ref('APP软件开发')
height: 95px;
border-radius: 100%;
background-color: #fff;
margin-bottom: 10px;
/* margin-bottom: 10px; */
}
.special_service_typeone {
@ -186,28 +178,6 @@ const text = ref('APP软件开发')
margin: auto;
font-size: 48px;
text-align: center;
/* top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%); */
}
.footer {
width: 100%;
/* position: fixed; */
/* bottom: 0px; */
text-align: center;
height: 150px;
background-color: black;
color: aliceblue;
font-size: 13px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hui {
color: #999;
}
</style>

74
src/views/contact.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="contact layout">
<div class="title">黑龙江东印科技</div>
<div class="content">国内专业的APP软件开发、小程序开发、网站开发定制服务商</div>
</div>
<div class="contact contact-way">
<div class="xinxi">
<Icon class="c-icon" name="map-information-2" color="orange"/>
<div class="text">XXX省xxx市XXX地址</div>
</div>
<div class="xinxi">
<Icon class="c-icon" name="mail" color="orange"/>
<div class="text">xxxxxxxxxx@qq.com</div>
</div>
<div class="xinxi">
<Icon class="c-icon" name="call" color="orange"/>
<div class="text">xxxxxxxxxxx</div>
</div>
</div>
<div class="empty"></div>
</template>
<script setup>
import { Icon } from 'tdesign-icons-vue-next';
</script>
<style scoped>
.empty{
height: 355px;
}
.text{
color: #000;
}
.c-icon{
font-size: 30px;
margin-bottom: 20px;
}
.contact-way{
background:#f8f8f8;
margin: 2px 0;
display: flex;
justify-content: center;
align-items: center;
}
.xinxi{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 150px;
}
.contact{
width: 100vw;
height: 200px;
}
.layout{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(190, 190, 190, 0.288);
}
.title{
font-size: 38px;
font-weight: 700;
color: rgb(100, 100, 100);
margin-top: 30px;
}
.content{
font-size: 16px;
margin-top: 20px;
}
</style>