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> |
<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> |
</template> |
||||
|
|
||||
<script setup></script> |
<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> |
<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> |
</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> |
<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> |
</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