generated from maochaoying/dreamworks-frontend-template
maochaoying
2 years ago
9 changed files with 333 additions and 16 deletions
-
4README.md
-
2index.html
-
44src/components/AboutUs.vue
-
39src/components/HeadLine.vue
-
63src/components/Header.vue
-
57src/components/HomeScreen.vue
-
1src/main.js
-
6src/pages/index.vue
-
133src/static/css/reset.css
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div class="about_us_container"> |
|||
<HeadLine /> |
|||
<div class="more_btn"> |
|||
<span>了解更多</span> |
|||
<img :src="RightArrow" alt="right_arrow" class="right_arrow" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import HeadLine from '@/components/HeadLine' |
|||
import RightArrow from '@/static/img/jiantou.png' |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.about_us_container { |
|||
margin: 0 auto; |
|||
width: 70vw; |
|||
padding: 103px 0; |
|||
.more_btn { |
|||
width: 173px; |
|||
height: 43px; |
|||
background: linear-gradient(90deg, #facc22, #f83600); |
|||
border-radius: 22px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 13px 30px; |
|||
font-size: 18px; |
|||
font-weight: 300; |
|||
color: #fafafa; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0 auto; |
|||
margin-top: 36px; |
|||
margin-bottom: 86px; |
|||
.right_arrow { |
|||
width: 19px; |
|||
height: 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,7 +1,42 @@ |
|||
<template> |
|||
<div>head line</div> |
|||
<div class="header_line_container"> |
|||
<h2 class="title">关于我们</h2> |
|||
<p class="line"></p> |
|||
<p class="desc"> |
|||
专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队 |
|||
</p> |
|||
<p class="desc"> |
|||
软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。 |
|||
</p> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
.header_line_container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.title { |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
margin-bottom: 24px; |
|||
} |
|||
.line { |
|||
width: 38px; |
|||
height: 4px; |
|||
background: #f95926; |
|||
border-radius: 2px; |
|||
margin-bottom: 24px; |
|||
} |
|||
.desc { |
|||
font-size: 18px; |
|||
font-weight: 300; |
|||
color: #686868; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,7 +1,64 @@ |
|||
<template> |
|||
<div>hader</div> |
|||
<div class="header_container"> |
|||
<img :src="Logo" alt="logo" class="logo_img" /> |
|||
<ul class="tab_group"> |
|||
<li :class="activeTab == 0 ? 'active' : ''" @click="changeActiveTab(0)"> |
|||
首页 |
|||
</li> |
|||
<li :class="activeTab == 1 ? 'active' : ''" @click="changeActiveTab(1)"> |
|||
关于我们 |
|||
</li> |
|||
<li :class="activeTab == 2 ? 'active' : ''" @click="changeActiveTab(2)"> |
|||
产品中心 |
|||
</li> |
|||
<li :class="activeTab == 3 ? 'active' : ''" @click="changeActiveTab(3)"> |
|||
联系我们 |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
import Logo from '@/static/img/2.png' |
|||
const activeTab = ref(0) |
|||
const changeActiveTab = index => { |
|||
activeTab.value = index |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
.header_container { |
|||
padding: 23px 200px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
.logo_img { |
|||
width: 216px; |
|||
height: 44px; |
|||
cursor: pointer; |
|||
} |
|||
.tab_group { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 18px; |
|||
font-weight: 200; |
|||
color: #ffffff; |
|||
& > li { |
|||
margin-right: 65px; |
|||
cursor: pointer; |
|||
&:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
.active { |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,7 +1,58 @@ |
|||
<template> |
|||
<div>home screen</div> |
|||
<div class="home_screen_container"> |
|||
<Header /> |
|||
<h1 class="main_title"> |
|||
做铁路相关的设备<span class="sign">研发和制造</span> |
|||
</h1> |
|||
<div class="to_bottom"> |
|||
<img :src="Arrow" alt="arrow" class="arrow" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
<script setup> |
|||
import Header from '@/components/Header' |
|||
import Arrow from '@/static/img/jiantou.png' |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
.home_screen_container { |
|||
position: relative; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: url(../static/img/1.png) no-repeat; |
|||
background-size: 100% 100%; |
|||
.main_title { |
|||
font-size: 76px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: bold; |
|||
color: #f1f1f1; |
|||
position: absolute; |
|||
top: 45%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
white-space: nowrap; |
|||
.sign { |
|||
color: RGBA(249, 89, 38, 1); |
|||
} |
|||
} |
|||
.to_bottom { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 38px; |
|||
height: 38px; |
|||
cursor: pointer; |
|||
border: 2px solid #ffffff; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
bottom: 53px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
.arrow { |
|||
width: 17px; |
|||
height: 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
|
|||
html, |
|||
body, |
|||
div, |
|||
span, |
|||
applet, |
|||
object, |
|||
iframe, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
p, |
|||
blockquote, |
|||
pre, |
|||
a, |
|||
abbr, |
|||
acronym, |
|||
address, |
|||
big, |
|||
cite, |
|||
code, |
|||
del, |
|||
dfn, |
|||
em, |
|||
img, |
|||
ins, |
|||
kbd, |
|||
q, |
|||
s, |
|||
samp, |
|||
small, |
|||
strike, |
|||
strong, |
|||
sub, |
|||
sup, |
|||
tt, |
|||
var, |
|||
b, |
|||
u, |
|||
i, |
|||
center, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ol, |
|||
ul, |
|||
li, |
|||
fieldset, |
|||
form, |
|||
label, |
|||
legend, |
|||
table, |
|||
caption, |
|||
tbody, |
|||
tfoot, |
|||
thead, |
|||
tr, |
|||
th, |
|||
td, |
|||
article, |
|||
aside, |
|||
canvas, |
|||
details, |
|||
embed, |
|||
figure, |
|||
figcaption, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
menu, |
|||
nav, |
|||
output, |
|||
ruby, |
|||
section, |
|||
summary, |
|||
time, |
|||
mark, |
|||
audio, |
|||
video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
menu, |
|||
nav, |
|||
section { |
|||
display: block; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, |
|||
ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, |
|||
q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, |
|||
blockquote:after, |
|||
q:before, |
|||
q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
* { |
|||
font-family: Source Han Sans CN; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue