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

123

master
maochaoying 2 years ago
parent
1522de1af0
commit
7251b5d409
9 changed files with 102 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/common/utils.js
  2. 7
      src/components/Trumbs/index.vue
  3. 5
      src/style.scss
  4. 69
      src/views/Index/components/CaseDetails/index.vue
  5. 4
      src/views/Index/components/CasePictureList/index.vue
  6. 2
      src/views/Index/components/Culture/Card/index.vue
  7. 70
      src/views/Index/components/HardwareDetails/index.vue
  8. 2
      src/views/Index/components/ReadWidely/Card/index.vue
  9. 4
      src/views/Index/components/Recruit/Card/index.vue

7
src/common/utils.js
View File

@ -1,5 +1,10 @@
const scaleFunc = (id, scale) => { const scaleFunc = (id, scale) => {
document.querySelector(id).style['transform-origin'] = 'center center'
if (['#case_detail_container', '#hardware_detail_container'].includes(id)) {
document.querySelector(id).style['transform-origin'] = 'center top'
} else {
document.querySelector(id).style['transform-origin'] = 'center center'
}
document.querySelector(id).style.transform = `scale(${scale})` document.querySelector(id).style.transform = `scale(${scale})`
handleBottomFont(id, scale) handleBottomFont(id, scale)
handleImgScale(id, scale) handleImgScale(id, scale)

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

@ -2,9 +2,9 @@
<div class="trumbs_container"> <div class="trumbs_container">
<swiper <swiper
:slidesPerView="7" :slidesPerView="7"
:spaceBetween="43"
:freeMode="true" :freeMode="true"
:modules="modules" :modules="modules"
:autoHeight="true"
@swiper="onSwiper" @swiper="onSwiper"
@slideChange="onSlideChange" @slideChange="onSlideChange"
class="trumbs_swiper" class="trumbs_swiper"
@ -14,7 +14,7 @@
? case_detail_img_data[industry_id] ? case_detail_img_data[industry_id]
: hard_img_data[hardware_id]" : hard_img_data[hardware_id]"
:key="item.id" :key="item.id"
style="background: none; height: 108px; width: 194px !important"
style="background: none; width: auto !important"
> >
<div class="img_card"> <div class="img_card">
<img :src="item.picUrl" class="img" alt="" /> <img :src="item.picUrl" class="img" alt="" />
@ -75,11 +75,10 @@ const onSwiper = swiper => {
.img_card { .img_card {
min-width: 194px; min-width: 194px;
width: 194px; width: 194px;
// height: 100%;
height: 108px; height: 108px;
position: relative; position: relative;
.img { .img {
width: 194px;
// width: 100%;
width: 194px; width: 194px;
} }
.dialog_text { .dialog_text {

5
src/style.scss
View File

@ -74,9 +74,6 @@ body {
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
/* Center slide text vertically */ /* Center slide text vertically */
display: flex !important;
justify-content: center !important;
align-items: center !important;
img { img {
display: block; display: block;
width: 100%; width: 100%;
@ -134,6 +131,8 @@ body {
.case_detail_swiper { .case_detail_swiper {
position: relative; position: relative;
width: 100%;
height: 100%;
.swiper-pagination { .swiper-pagination {
display: block; display: block;
position: absolute; position: absolute;

69
src/views/Index/components/CaseDetails/index.vue
View File

@ -16,20 +16,24 @@
}} }}
</p> </p>
</div> </div>
<swiper
:pagination="true"
:modules="modules"
class="case_detail_swiper"
style="background: none"
>
<swiper-slide
v-for="item in case_detail_list[industry_id] &&
case_detail_list[industry_id][example_id]?.swiperList"
:key="item.id"
<div class="case_swiper_wrap">
<swiper
:pagination="true"
:modules="modules"
:autoHeight="true"
class="case_detail_swiper"
> >
<img :src="item.picUrl" class="img_swiper" alt="" />
</swiper-slide>
</swiper>
<swiper-slide
v-for="item in case_detail_list[industry_id] &&
case_detail_list[industry_id][example_id]?.swiperList"
:key="item.id"
>
<div class="swiper_div_wrap">
<img :src="item.picUrl" class="img_swiper" alt="" />
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
<div class="placeholder"> <div class="placeholder">
<div <div
@ -123,32 +127,33 @@ const mouseleave = function () {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
background: $common_bg; background: $common_bg;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
padding-bottom: 50px;
.empty { .empty {
width: 100%;
min-height: 90px; min-height: 90px;
} }
.flex_center { .flex_center {
flex: 1; flex: 1;
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.case_detail_container { .case_detail_container {
width: 100%;
max-width: 100vw;
height: 100%; height: 100%;
.empty {
min-height: 90px;
}
.content { .content {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 20px 153px 60px 153px;
height: 100%;
padding: 40px 153px 0 153px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
@ -162,13 +167,23 @@ const mouseleave = function () {
.left_swiper { .left_swiper {
width: 1024px; width: 1024px;
position: relative; position: relative;
.case_detail_swiper {
width: 100%;
height: auto;
flex: 1;
display: flex;
// justify-content: space-between;
flex-direction: column;
.case_swiper_wrap {
// flex: 1;
} }
.img_swiper {
width: 1024px;
height: auto;
.swiper_div_wrap {
// width: 1024px;
width: 100%;
// height: 576px;
overflow: hidden;
.img_swiper {
width: 1024px;
height: 576px;
object-fit: cover;
}
} }
.header_intro { .header_intro {
min-height: 80px; min-height: 80px;
@ -191,8 +206,8 @@ const mouseleave = function () {
} }
.placeholder { .placeholder {
flex: 1; flex: 1;
height: auto;
position: relative; position: relative;
height: 656px;
.right_detail { .right_detail {
transition-property: all; transition-property: all;
transition-duration: 0.7s; transition-duration: 0.7s;

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

@ -59,7 +59,7 @@
</div> </div>
<div class="pic_list"> <div class="pic_list">
<div class="scroll_container_case mb4" id="scroll_container_case_1"> <div class="scroll_container_case mb4" id="scroll_container_case_1">
<div class="img_card" v-for="item in 20" :key="item">
<div class="img_card" v-for="item in 30" :key="item">
<img class="pic" :src="A1" alt="" /> <img class="pic" :src="A1" alt="" />
<div class="dialog_text"> <div class="dialog_text">
<div class="btn">查看详情</div> <div class="btn">查看详情</div>
@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="scroll_container_case mb4" id="scroll_container_case_3"> <div class="scroll_container_case mb4" id="scroll_container_case_3">
<div class="img_card" v-for="item in 20" :key="item">
<div class="img_card" v-for="item in 30" :key="item">
<img class="pic" :src="A1" alt="" /> <img class="pic" :src="A1" alt="" />
<div class="dialog_text"> <div class="dialog_text">
<div class="btn">查看详情</div> <div class="btn">查看详情</div>

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

@ -106,7 +106,7 @@ const getTips = () => {
height: 625px; height: 625px;
.hold_wrap { .hold_wrap {
box-sizing: border-box; box-sizing: border-box;
background: rgba(0, 0, 0, 0.63);
background: rgba(0, 0, 0, 0.5);
height: 100%; height: 100%;
padding: 46px 45px 169px 45px; padding: 46px 45px 169px 45px;
display: flex; display: flex;

70
src/views/Index/components/HardwareDetails/index.vue
View File

@ -16,20 +16,25 @@
}} }}
</p> </p>
</div> </div>
<swiper
:pagination="true"
:modules="modules"
class="case_detail_swiper"
style="background: none"
>
<swiper-slide
v-for="item in case_detail_list[hardware_id] &&
case_detail_list[hardware_id][hardwareExampleId]?.swiperList"
:key="item.id"
<div class="case_swiper_wrap">
<swiper
:pagination="true"
:modules="modules"
:autoHeight="true"
class="case_detail_swiper"
> >
<img :src="item.picUrl" class="img_swiper" alt="" />
</swiper-slide>
</swiper>
<swiper-slide
v-for="item in case_detail_list[hardware_id] &&
case_detail_list[hardware_id][hardwareExampleId]
?.swiperList"
:key="item.id"
>
<div class="swiper_div_wrap">
<img :src="item.picUrl" class="img_swiper" alt="" />
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
<div class="placeholder"> <div class="placeholder">
<div <div
@ -124,32 +129,33 @@ const mouseleave = function () {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
background: $common_bg; background: $common_bg;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
padding-bottom: 50px;
.empty { .empty {
width: 100%;
min-height: 90px; min-height: 90px;
} }
.flex_center { .flex_center {
flex: 1; flex: 1;
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.hardware_detail_container { .hardware_detail_container {
width: 100%;
max-width: 100vw;
height: 100%; height: 100%;
.empty {
min-height: 90px;
}
.content { .content {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 20px 153px 60px 153px;
height: 100%;
padding: 40px 153px 0 153px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
@ -163,13 +169,23 @@ const mouseleave = function () {
.left_swiper { .left_swiper {
width: 1024px; width: 1024px;
position: relative; position: relative;
.case_detail_swiper {
width: 100%;
height: auto;
flex: 1;
display: flex;
// justify-content: space-between;
flex-direction: column;
.case_swiper_wrap {
// flex: 1;
} }
.img_swiper {
width: 1024px;
height: auto;
.swiper_div_wrap {
// width: 1024px;
width: 100%;
// height: 576px;
overflow: hidden;
.img_swiper {
width: 1024px;
height: 576px;
object-fit: cover;
}
} }
.header_intro { .header_intro {
min-height: 80px; min-height: 80px;
@ -192,8 +208,8 @@ const mouseleave = function () {
} }
.placeholder { .placeholder {
flex: 1; flex: 1;
height: auto;
position: relative; position: relative;
height: 656px;
.right_detail { .right_detail {
transition-property: all; transition-property: all;
transition-duration: 0.7s; transition-duration: 0.7s;

2
src/views/Index/components/ReadWidely/Card/index.vue
View File

@ -68,7 +68,7 @@ const getBg = () => {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.68);
background: rgba(0, 0, 0, 0.5);
font-size: 24px; font-size: 24px;
font-family: 'SourceHanSans'; font-family: 'SourceHanSans';
font-weight: 500; font-weight: 500;

4
src/views/Index/components/Recruit/Card/index.vue
View File

@ -65,7 +65,7 @@ const getClass = () => {
animation-fill-mode: forwards; animation-fill-mode: forwards;
cursor: pointer; cursor: pointer;
.dialog { .dialog {
background: rgba(0, 0, 0, 0.68);
background: rgba(0, 0, 0, 0.5);
padding: 43px 30px 34px 60px; padding: 43px 30px 34px 60px;
box-sizing: border-box; box-sizing: border-box;
transition-property: all; transition-property: all;
@ -125,7 +125,7 @@ const getClass = () => {
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
.dialog { .dialog {
background: rgba(40, 63, 231, 0.68);
background: rgba(40, 63, 231, 0.5);
} }
} }

Write Preview
Loading…
Cancel
Save