maochaoying
/
hjyd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

123

master
maochaoying 2 years ago
parent
0625fcd46c
commit
3232c4663d
9 changed files with 177 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/fonts/SourceHanSansCN-ExtraLight.otf
  2. 15
      src/common/utils.js
  3. 4
      src/style.scss
  4. 156
      src/views/Index/components/CasePictureList/index.vue
  5. 7
      src/views/Index/components/Cooperation/index.vue
  6. 56
      src/views/Index/components/Culture/Card/index.vue
  7. 1
      src/views/Index/components/Culture/index.vue
  8. 33
      src/views/Index/components/Service/index.vue
  9. 5
      src/views/Index/components/SoftHardwareSummary/index.vue

BIN
src/assets/fonts/SourceHanSansCN-ExtraLight.otf
View File

15
src/common/utils.js
View File

@ -7,6 +7,7 @@ export const handleScreenAuto = (showEmpty, id) => {
document.querySelector(id).style.transform = `scale(${scale})`
handleBottomFont(id, scale)
handleImgScale(id, scale)
handleCooperation(id, scale)
showEmpty.value = false
} else {
if (clientHeight >= 1764) {
@ -14,6 +15,7 @@ export const handleScreenAuto = (showEmpty, id) => {
document.querySelector(id).style.transform = `scale(${scale})`
handleBottomFont(id, scale)
handleImgScale(id, scale)
handleCooperation(id, scale)
showEmpty.value = false
} else {
if (clientHeight >= 1323) {
@ -21,12 +23,14 @@ export const handleScreenAuto = (showEmpty, id) => {
document.querySelector(id).style.transform = `scale(${scale})`
handleBottomFont(id, scale)
handleImgScale(id, scale)
handleCooperation(id, scale)
showEmpty.value = false
} else {
const scale = 1080 / clientHeight
document.querySelector(id).style.transform = `scale(${scale})`
handleBottomFont(id, scale)
handleImgScale(id, scale)
handleCooperation(id, scale)
showEmpty.value = false
}
}
@ -55,6 +59,17 @@ const handleImgScale = (id, scale) => {
}
}
const handleCooperation = (id, scale) => {
if (id == '#cooperation_container') {
document.getElementById('contract_bg_coop').style.transform = `scale(${
1 / scale
})`
document.getElementById(
'contract_real_coop',
).style.transform = `scale(${scale})`
}
}
export const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {

4
src/style.scss
View File

@ -16,6 +16,10 @@ body {
src: url(./assets/fonts/ZonaPro-ExtraBold.otf);
}
@font-face {
font-family: 'SourceHanSansLight';
src: url(./assets/fonts/SourceHanSansCN-ExtraLight.otf);
}
@font-face {
font-family: 'SourceHanSans';
src: url(./assets/fonts/SourceHanSansCN-Normal.otf);
}

156
src/views/Index/components/CasePictureList/index.vue
View File

@ -15,72 +15,47 @@
<div class="text"><span class="blue">1000W+</span>年</div>
</div>
<div class="pic_list">
<div class="pic_row mb4">
<swiper
:slidesPerView="5"
:modules="modules"
class="pic_swiper"
:speed="5000"
:autoplay="{
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false,
}"
>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
</swiper>
<div class="scroll_container_case mb4" id="scroll_container_case_1">
<ul>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
</ul>
</div>
<div class="pic_row mb4">
<swiper
:slidesPerView="5"
:modules="modules"
class="pic_swiper"
:speed="5000"
:autoplay="{
delay: 0,
reverseDirection: true,
stopOnLastSlide: false,
disableOnInteraction: false,
}"
>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
</swiper>
<div class="scroll_container_case mb4" id="scroll_container_case_2">
<ul>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
</ul>
</div>
<div class="pic_row">
<swiper
:slidesPerView="5"
:modules="modules"
class="pic_swiper"
:speed="5000"
:autoplay="{
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false,
}"
>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
<swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
</swiper>
<div class="scroll_container_case" id="scroll_container_case_3">
<ul>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
<li><img class="pic" :src="A" alt="" /></li>
</ul>
</div>
</div>
</div>
@ -97,10 +72,32 @@ import { Autoplay } from 'swiper'
import { handleScreenAuto } from '@/common/utils'
// Import Swiper styles
import 'swiper/css'
const handleScroll = (id, speed) => {
var oDiv = document.getElementById(id)
var oUl = oDiv.getElementsByTagName('ul')[0]
var aLi = oUl.getElementsByTagName('li')
var iSpeed = speed //正左负右
var timer = null
//计算ul的宽为所有li的宽的和;
oUl.innerHTML += oUl.innerHTML + oUl.innerHTML
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'
function Slider() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = 0
} else if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px'
}
oUl.style.left = oUl.offsetLeft - iSpeed + 'px' //正负为方向
}
timer = setInterval(Slider, 30)
}
const modules = ref([Autoplay])
onMounted(() => {
handleScreenAuto(showEmpty, '#case_picture')
window.onresize = handleScreenAuto(showEmpty, '#case_picture')
handleScroll('scroll_container_case_1', 2)
handleScroll('scroll_container_case_2', -2)
handleScroll('scroll_container_case_3', 2)
})
const showEmpty = ref(false)
</script>
@ -157,6 +154,7 @@ const showEmpty = ref(false)
.detail {
font-size: 18px;
font-weight: 300;
font-family: 'SourceHanSansLight';
color: #646a73;
}
}
@ -181,22 +179,28 @@ const showEmpty = ref(false)
}
}
.pic_list {
width: 100%;
padding: 75px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.mb4 {
margin-bottom: 41px;
}
.pic_row {
display: flex;
align-items: center;
justify-content: space-evenly;
.pic {
width: 307px;
height: 171px;
.scroll_container_case {
position: relative;
overflow: hidden;
height: 171px;
ul {
position: absolute;
left: 0;
li {
padding: 5px;
list-style: none;
width: 307px;
float: left;
margin: 0 22px;
.pic {
width: 307px;
height: 171px;
}
}
}
}
}

7
src/views/Index/components/Cooperation/index.vue
View File

@ -5,11 +5,11 @@
<div class="contract_title">
<p class="line"></p>
<p class="title">合作<span class="blue_font">客户</span></p>
<p class="detail">互联网公司 生产制造公司 智能硬件公司</p>
<p class="detail">医疗企业 互联网公司 智能硬件公司 科研院所</p>
<img class="img" :src="Back" alt="back" />
</div>
<div class="contract">
<div class="real_img"></div>
<div class="contract" id="contract_bg_coop">
<div class="real_img" id="contract_real_coop"></div>
</div>
</div>
</div>
@ -83,6 +83,7 @@ const showEmpty = ref(false)
font-size: 18px;
font-weight: 300;
color: #646a73;
font-family: 'SourceHanSansLight';
}
}
.contract {

56
src/views/Index/components/Culture/Card/index.vue
View File

@ -10,7 +10,7 @@
<div class="header_card">
<div class="btn">{{ getTitle() }}</div>
</div>
<p class="text">
<p :class="getContentClass()">
{{ getContent() }}
</p>
<p class="tip">{{ getTips() }}</p>
@ -26,6 +26,24 @@ const props = defineProps({
const getClassName = () => {
return `culture_card_container bg${props.i}`
}
const getContentClass = () => {
if (props.i == '1') {
return 'text font1'
}
if (props.i == '2') {
return 'text font2'
}
if (props.i == '3') {
return 'text font3'
}
if (props.i == '4') {
return 'text font4'
}
if (props.i == '5') {
return 'text font5'
}
}
const getTitle = () => {
if (props.i == '1') {
return '自信'
@ -94,6 +112,7 @@ const getTips = () => {
justify-content: space-between;
align-items: center;
flex-direction: column;
position: relative;
.top_circle {
display: none;
}
@ -110,14 +129,37 @@ const getTips = () => {
}
.text {
font-size: 16px;
font-family: 'SourceHanSans';
font-family: 'SourceHanSansLight';
line-height: 32px;
font-weight: 300;
color: #ffffff;
position: absolute;
word-break: break-all;
top: 235px;
}
.font1 {
width: 216px;
left: 45px;
}
.font2 {
width: 237px;
left: 35px;
}
.font3 {
width: 212px;
left: 41px;
}
.font4 {
width: 254px;
left: 28px;
}
.font5 {
width: 251px;
left: 28px;
}
.tip {
font-size: 30px;
font-family: 'ZonaPro';
font-family: 'SourceHanSansLight';
font-weight: 400;
color: #ffffff;
}
@ -167,11 +209,11 @@ const getTips = () => {
}
}
.bg1 {
background: url(../../../../../assets/img/culture/lilunjieheback.png);
background: url(../../../../../assets/img/culture/zixinback.png);
background-size: 100% 100%;
}
.bg2 {
background: url(../../../../../assets/img/culture/lilunjieheback.png);
background: url(../../../../../assets/img/culture/siweiluojiback.png);
background-size: 100% 100%;
}
.bg3 {
@ -179,11 +221,11 @@ const getTips = () => {
background-size: 100% 100%;
}
.bg4 {
background: url(../../../../../assets/img/culture/lilunjieheback.png);
background: url(../../../../../assets/img/culture/wendangback.png);
background-size: 100% 100%;
}
.bg5 {
background: url(../../../../../assets/img/culture/lilunjieheback.png);
background: url(../../../../../assets/img/culture/xiangmuback.png);
background-size: 100% 100%;
}
</style>

1
src/views/Index/components/Culture/index.vue
View File

@ -122,6 +122,7 @@ const showEmpty = ref(false)
font-size: 18px;
font-weight: 300;
color: #646a73;
font-family: 'SourceHanSansLight';
}
}
.card_list {

33
src/views/Index/components/Service/index.vue
View File

@ -5,23 +5,27 @@
<div class="content">
<div class="main">
<h1 class="big_title">
一站式 <span class="blue_font">产品研发/设计服务</span>
<span class="blue_font"
>产品研发&nbsp;/&nbsp;设计&nbsp;/&nbsp;量产</span
>&nbsp;&nbsp;一站式服务
</h1>
<p class="article" id="a">
产品梦工厂一家公司全部帮您搞定，减少供应商数<br />量就能防止供应商
<span class="blue_font">扯皮/推诿</span>帮您省心省力还能帮<br />
您 &nbsp; &nbsp;<span class="blue_font">节省30%</span>&nbsp;
&nbsp;的项目投入。
产品梦工厂一家公司全部帮您搞定<br />减少供应商数量就能防止供应商
<span class="blue_font">扯皮/推诿</span><br />帮您<span
class="blue_font"
>省心、省力</span
><br />还能帮您 &nbsp;
<span class="blue_font">节省30%的项目投入</span>
</p>
</div>
</div>
<div class="card_wrapper">
<Card title="工业设计" title_en="industrial design" i="1" />
<Card title="结构设计" title_en="Structural Design" i="2" />
<Card title="软件研发" title_en="Software development" i="3" />
<Card title="硬件研发" title_en="Hardware R&D" i="4" />
<Card title="样机制作" title_en="Prototype production" i="5" />
<Card title="产品量产" title_en="volume production" i="6" />
<Card title="工业设计" title_en="INDUSTRIAL DESIGN" i="1" />
<Card title="结构设计" title_en="STRUCTURAL DESIGN" i="2" />
<Card title="硬件研发" title_en="HARDWARE DEVELOPMENT" i="4" />
<Card title="软件研发" title_en="SOFTWARE DEVELOPMENT" i="3" />
<Card title="样机制作" title_en="PROTOTYPE PRODUCTION" i="5" />
<Card title="产品量产" title_en="VOLUME PRODUCTION" i="6" />
</div>
<div class="bottom_container" id="bottom_container">
<p id="bottom_font_save">Save 30%</p>
@ -67,7 +71,7 @@ const showEmpty = ref(false)
.main {
position: absolute;
left: 182px;
top: 80px;
top: 180px;
font-size: 30px;
font-weight: bold;
color: #000000;
@ -90,9 +94,10 @@ const showEmpty = ref(false)
.article {
margin-top: 34px;
font-size: 20px;
font-weight: 300;
font-weight: 800;
color: #808080;
line-height: 32px;
line-height: 38px;
font-family: 'SourceHanSansLight';
}
.blue_font {
color: $theme_color;

5
src/views/Index/components/SoftHardwareSummary/index.vue
View File

@ -143,6 +143,11 @@ const showEmpty = ref(false)
color: #ffffff;
}
}
.card_wrap:hover {
.img {
transform: scale(1.3);
}
}
.bg1 {
background: url(../../../../assets/img/hardware/1back.png);
background-size: 100% 100%;

Write Preview
Loading…
Cancel
Save