diff --git a/src/App.vue b/src/App.vue index 1e3edc2..7a0db6e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -146,7 +146,7 @@ this.$router.push({ #header{ width: 100%; min-width: 1280px; - max-width: 1362px; + max-width: 100%; margin: auto; position: fixed; top: 43px; @@ -159,7 +159,7 @@ this.$router.push({ } .header { box-sizing: border-box; - width: 100%; + width: 80%; min-width: 1280px; height: 82px; margin: auto; diff --git a/src/assets/images/rongyu/1.png b/src/assets/images/rongyu/1.png new file mode 100644 index 0000000..90eac90 Binary files /dev/null and b/src/assets/images/rongyu/1.png differ diff --git a/src/assets/images/rongyu/2.png b/src/assets/images/rongyu/2.png new file mode 100644 index 0000000..92bfa03 Binary files /dev/null and b/src/assets/images/rongyu/2.png differ diff --git a/src/assets/images/rongyu/3.png b/src/assets/images/rongyu/3.png new file mode 100644 index 0000000..cd40663 Binary files /dev/null and b/src/assets/images/rongyu/3.png differ diff --git a/src/assets/images/rongyu/4.png b/src/assets/images/rongyu/4.png new file mode 100644 index 0000000..613d45f Binary files /dev/null and b/src/assets/images/rongyu/4.png differ diff --git a/src/assets/images/rongyu/5.png b/src/assets/images/rongyu/5.png new file mode 100644 index 0000000..c4e8877 Binary files /dev/null and b/src/assets/images/rongyu/5.png differ diff --git a/src/assets/images/rongyu/6.png b/src/assets/images/rongyu/6.png new file mode 100644 index 0000000..3490f56 Binary files /dev/null and b/src/assets/images/rongyu/6.png differ diff --git a/src/assets/images/rongyu/7.png b/src/assets/images/rongyu/7.png new file mode 100644 index 0000000..a59cce5 Binary files /dev/null and b/src/assets/images/rongyu/7.png differ diff --git a/src/assets/images/rongyu/bg.png b/src/assets/images/rongyu/bg.png new file mode 100644 index 0000000..42cea04 Binary files /dev/null and b/src/assets/images/rongyu/bg.png differ diff --git a/src/assets/images/rongyu/jiazhi.png b/src/assets/images/rongyu/jiazhi.png new file mode 100644 index 0000000..c01cd8e Binary files /dev/null and b/src/assets/images/rongyu/jiazhi.png differ diff --git a/src/assets/images/rongyu/shiming.png b/src/assets/images/rongyu/shiming.png new file mode 100644 index 0000000..768eb3a Binary files /dev/null and b/src/assets/images/rongyu/shiming.png differ diff --git a/src/assets/images/rongyu/yuanjing.png b/src/assets/images/rongyu/yuanjing.png new file mode 100644 index 0000000..eea1443 Binary files /dev/null and b/src/assets/images/rongyu/yuanjing.png differ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 8a44cfd..0695744 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -21,7 +21,7 @@
-
+

企业新闻

@@ -84,7 +84,7 @@
-
+
@@ -99,7 +99,7 @@
- +
@@ -384,7 +384,7 @@ h6 { .index-top { position: relative; - padding-bottom: 24px; + margin-bottom: 24px; border-bottom: 2px solid #c9c9c9; border-bottom: 2px solid rgba(201, 201, 201, .5); diff --git a/src/views/aboutus.vue b/src/views/aboutus.vue index f2c0573..c6daf21 100644 --- a/src/views/aboutus.vue +++ b/src/views/aboutus.vue @@ -1,5 +1,6 @@ @@ -138,12 +333,108 @@ export default { data() { return { - activeName: 'first' - }; + activeName: 'first', + timeIndex: 6, + timeLineList: [{ + "timestamp": "2024年", + "color": "#999", + "fontsize": 18, + "year": "2019", + "bgcolor": "#e4e7ed", + "size": "28", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2023年", + "color": "#999", + "fontsize": 18, + "size": "28", + "bgcolor": "#e4e7ed", + "year": "2018", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2022年", + "color": "#999", + "fontsize": 18, + "size": "28", + "bgcolor": "#e4e7ed", + "year": "2017", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2021年", + "color": "#999", + "fontsize": 18, + "size": "28", + "year": "2016", + "bgcolor": "#e4e7ed", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2020年", + "color": "#999", + "fontsize": 18, + "year": "2015", + "size": "28", + "bgcolor": "#e4e7ed", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2019年", + "color": "#999", + "fontsize": 18, + "size": "28", + "bgcolor": "#e4e7ed", + "year": "2014", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2018年", + "color": "#999", + "fontsize": 18, + "size": "28", + "bgcolor": "#e4e7ed", + "year": "2013", + "info": "工作室更名为：西安拓美网络科技有限公司" + }, { + "timestamp": "2017及", + "color": "#999", + "fontsize": 18, + "size": "28", + "bgcolor": "#e4e7ed", + "icon": "el-iconprev", + "year": "2012", + "info": "chengli" + }] + } }, methods: { handleClick(tab, event) { - console.log(tab, event); + console.log(tab.index); + }, + changeActive(index) { + this.timeIndex = index; + }, + moveLeft() { + + // let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft); + // let listNum = 0; + // if(marginLeft <= 10 && (marginLeft >= -650)){ + // this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px'; + if (this.timeIndex < 1) { + return + } + else { + this.timeIndex = this.timeIndex - 1 + console.log(this.timeIndex) + } + + }, + moveRight() { + // let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft); + // if(marginLeft < (-200)){ + // this.$refs.mytimeline.style.marginLeft = marginLeft + 220 + 'px'; + // } + if (this.timeIndex > this.timeLineList.length - 2) { + return + } else { + this.timeIndex = this.timeIndex + 1 + } } } }; @@ -311,20 +602,24 @@ li { color: rgba(38, 42, 59, .7); line-height: 26px; } + .about_4 { min-height: 660px; background: url('../assets/images/bg.png') no-repeat center; background-size: cover; } + .about_4 .content { padding: 138px 0 0; position: relative; height: 100%; } + .content { width: 80%; margin: 0 auto; } + .about_4 h3 { font-family: 'Rajdhani'; font-size: 48px; @@ -332,18 +627,21 @@ li { color: rgba(255, 255, 255, .5); line-height: 1; } + .about_4 h5 { font-size: 30px; color: #00b4b7; line-height: 1; margin: 8px 0 10px; } + .about_4 p { font-size: 15px; color: #ffffff; color: rgba(255, 255, 255, .44); line-height: 30px; } + .about_4 h6 { font-size: 48px; color: #00b4b7; @@ -351,29 +649,35 @@ li { font-weight: lighter; margin: 52px 0 12px; } + .about_4 ul { padding-left: 18px; list-style: inherit; } + .about_4 li { list-style: inherit; color: #ffffff; } + .about_4 .bl_map { position: absolute; top: 87px; right: -110px; } + .bl_map { position: relative; width: 951px; } + .bl_map .scope.s3 { width: 166px; height: 166px; left: 62%; top: 21%; } + .bl_map .scope { position: absolute; z-index: 9; @@ -383,6 +687,7 @@ li { animation: h_map 2s .6s linear alternate infinite; -webkit-animation: h_map 2s .6s linear alternate infinite; } + .bl_map .scope:before { content: ''; width: 100%; @@ -397,25 +702,29 @@ li { -ms-border-radius: 50%; -o-border-radius: 50%; opacity: .5; - filter: alpha(opacity = 50); - -webkit-filter: alpha(opacity = 50); + filter: alpha(opacity=50); + -webkit-filter: alpha(opacity=50); animation: h_map 2s linear alternate infinite; -webkit-animation: h_map 2s linear alternate infinite; } + @keyframes h_map { 0% { - - transform: scale(.6); -} -100% { - - transform: scale(1); -} + + transform: scale(.6); + } + + 100% { + + transform: scale(1); + } } + .bl_map .scope.s3 p { width: 100%; text-align: center; } + .bl_map .scope p { font-size: 14.5px; color: #c2cff3; @@ -425,4 +734,78 @@ li { top: 50%; margin-top: -12px; } + +.my_timeline_prev, +.my_timeline_next { + float: left; + display: inline-block; + background-color: #fff; + cursor: pointer; +} + +.my_timeline_prev { + /* width: 200px; */ + /* float: left; */ + flex: 0.5 +} + +.my_timeline_next { + /* width: 34px; + margin-left: -22px; */ + flex: 0.5 +} + +.ul_box { + width: 100%; + + display: inline-block; + float: left; + margin-top: 2px; + overflow: hidden; +} + +.my_timeline_item { + display: inline-block; + flex: 1; + +} + +.my_timeline_node { + box-sizing: border-box; + border-radius: 50%; + cursor: pointer; +} + +.my_timeline_node.active { + background-color: #fff !important; + color: rgb(0, 113, 203); + font-size: 26px; + line-height: 24px; +} + +.my_timeline_item_line { + /* width: 100%; */ + height: 10px; + /* margin: -14px 0 0 28px; */ + border-top: 2px solid #E4E7ED; + border-left: none; +} + +.my_timeline_item_content { + width: 80%; + margin: auto; + +} + +h5 { + font-family: 'Rajdhani'; + font-size: 30px; + color: #ffffff; + color: rgba(219, 219, 219); + line-height: 24px; + text-transform: uppercase; + letter-spacing: -1px; + margin-top: 8px; + margin-bottom: 8px; +} \ No newline at end of file