关于我们

css/about.css

@@ -86,7 +86,7 @@
 .area_com {
   color: #666666;
   font-size: 0.14rem;
-  line-height: 0.24rem;
+  line-height: 0.3rem;
 }
 .area_right {
   flex: 3;
@@ -128,17 +128,17 @@
 }
 .area_fs{
   width: 2.8rem;
-  height: 3rem;
+  height: 3.2rem;
   background-color: white;
   color: #333333;
   text-align: center;
-  padding: 0 0.2rem;
+  padding: 0 0.1rem;
   box-sizing: border-box;
 }
 .area_fs img{
   width: 0.9rem;
   height: 0.8rem;
-  margin: 0.1rem auto 0;
+  margin: 0 auto 0;
 }
 .area_fs div {
   font-size: 0.18rem;
@@ -148,4 +148,93 @@
   font-size: 0.14rem;
   line-height: 0.24rem;
   margin-top: 0;
+}
+.develop_container{
+  height: 1.6rem;
+  position: relative;
+}
+.jt{
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.15rem;
+  height: 0.26rem;
+  cursor: pointer;
+  z-index: 1000;
+}
+.leftjt{
+  left: 0;
+}
+.rightjt{
+  right: 0;
+}
+.showdata{
+  width: 90%;
+  height: 1.6rem;
+  margin: 0 auto;
+  position: relative;
+}
+.line{
+  width: 100%;
+  height: 0.04rem;
+  background-color: #f3f4f8ff;
+  position: absolute;
+  top: 50%;
+    transform: translateY(-50%);
+}
+.rounds{
+  width: 100%;
+  position: absolute;
+    top: 25%;
+    left: 0;
+    transform: translate(0, -50%);
+    white-space: nowrap;
+}
+.round_q{
+  display: inline-block;
+  width: 2.34rem;
+  height: 100%;
+}
+.round_item{
+  margin: 0 auto;
+  width: 0.18rem;
+  height: 0.18rem;
+  line-height: 0.18rem;
+  background-color: white;
+  border-radius: 50%;
+  border: 1px solid #e4e4e4ff;
+  position: relative;
+  cursor: pointer;
+}
+.round_i{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  width: 0.12rem;
+    height: 0.12rem; 
+    background-color: #e4e4e4ff;
+    border-radius: 50%;
+}
+.round_d{
+  width: 0.9rem;
+  text-align: center;
+  font-size: 0.18rem;
+  color: #cccccc;
+  position: absolute;
+  top: 0.4rem;
+  left: -0.35rem;
+}
+.active .round_item{
+  border-color: #016cff;
+
+}
+.active .round_i {
+  background-color: #016cff;
+
+}
+.active .round_d {
+  color: #016cff;
+  font-size: 0.36rem;
+  font-weight: bold;
 }

js/about.js

@@ -1,21 +1,143 @@
- $(".main-timeline .timeline").click(function () {
-       var TAG = $(this).siblings().length;
-       if (TAG >= 1) {
-         var index = $(this).index()
-         $(this).addClass('fd-active-line').siblings().removeClass('fd-active-line')
-         $(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
-       }
-     })
-     var swiper = new Swiper('.swiper-container', {
-       slidesPerView: 4,
-       direction: 'vertical',
-       navigation: {
-         nextEl: '.swiper-button-next',
-         prevEl: '.swiper-button-prev',
-       },
-       on: {
-         resize: function () {
-           swiper.changeDirection(getDirection());
-         }
-       }
-     });
+var datalist = [
+  { time: 2023 },
+  { time: 2022 },
+  { time: 2021 },
+  { time: 2020 },
+  { time: 2019 },
+  { time: 2018 }
+];
+
+var html = "";
+$.each(datalist, (idx, item) => {
+  html += `<div class="round_q">
+                    <div class="round_item">
+                    <div class="round_i"></div>
+                    <div class="round_d">${item.time}</div>
+                  </div></div>`;
+});
+$(".rounds").width(datalist.length * 2.34 + "rem");
+$(".rounds").html(html);
+$(".round_q:first").addClass("active"); //默认第一个添加背景色
+//获取元素
+var divwidth = $(".round_q:first").width() - 54;
+console.log(divwidth);
+var container = $(".showdata");
+var list = $(".rounds");
+var buts = $(".round_q");
+var prev = $(".leftjt");
+var next = $(".rightjt");
+
+var index = 1; //存放当前显示的图片的下标
+var len = 5;
+var interval = 5000; //位移时间间隔
+var timer;
+
+function animate(offset) {
+  console.log(index);
+  var left = parseInt(list.css("left")) + offset;
+  console.log(left, offset);
+  // 边界判断
+  if (offset > 0) {
+    offset = "+=" + offset;
+  } else {
+    offset = "-=" + Math.abs(offset);
+  }
+
+  list.animate({ left: offset }, 300, function () {
+    if (left > -200) {
+      console.log(22);
+      list.css("left", (0 - offset) * len);
+    }
+    console.log(offset * len);
+    if (left < offset * len) {
+      console.log(111);
+      list.css("left", 0 - offset);
+    }
+  });
+}
+
+//亮起小圆点
+function showButton() {
+  //当前图片的小圆点亮起，其他小圆点不亮
+  console.log("gaoliang");
+  buts
+    .eq(index - 1)
+    .addClass("active")
+    .siblings()
+    .removeClass("active");
+}
+
+// 鼠标离开图片区域时，轮播继续
+function play() {
+  timer = setTimeout(function () {
+    next.trigger("click");
+    play();
+  }, interval);
+}
+
+//鼠标进入图片区域时，停止轮播
+function stop() {
+  clearTimeout(timer);
+}
+
+// 右按钮点击事件
+next.bind("click", function () {
+  // 判断当前是否在动画
+  if (list.is(":animated")) {
+    return;
+  }
+
+  // 判断当前图片是否是最后一张
+  if (index == 5) {
+    index = 1;
+  } else {
+    index += 1;
+  }
+  console.log("you", index);
+  animate(0 - divwidth);
+  showButton();
+});
+
+// 左按钮事件
+prev.bind("click", function () {
+  // 判断当前是否在动画
+  if (list.is(":animated")) {
+    return;
+  }
+
+  // 判断当前图片是否是第一张
+  if (index == 1) {
+    index = 5;
+  } else {
+    index -= 1;
+  }
+  console.log(zuo, index);
+  animate(divwidth);
+  showButton();
+});
+
+// 小圆点点击事件
+// buttons.each(function () {
+//   $(this).bind("click", function () {
+//     // 判断当前是否在进行动画
+//     if (list.is(":animated") || $(this).attr("class") == "on") {
+//       return;
+//     }
+//     // 获取属性
+//     var myIndex = parseInt($(this).attr("index"));
+
+//     //计算偏移量
+//     var offset = -600 * (myIndex - index);
+
+//     animate(offset);
+
+//     //切换后，更新当前的偏移量
+//     index = myIndex;
+
+//     showButton();
+//   });
+// });
+
+container.hover(stop, play);
+
+play();

sections/about.html

@@ -161,13 +161,20 @@
       <div class="piece">
         <div class="piece_item">
           <div class="area_title">发展历程</div>
-          <div class="swiper-container">
-            <!-- 如果需要分页器 -->
-            <div class="swiper-pagination"></div>
-
-            <!-- 如果需要导航按钮 -->
-            <div class="swiper-button-prev"></div>
-            <div class="swiper-button-next"></div>
+          <div class="develop_container">
+            <img class="leftjt jt" src="../img/about/leftjt.png" />
+            <img class="rightjt jt" src="../img/about/rightjt.png" />
+            <div class="showdata">
+              <div class="line"></div>
+              <div class="rounds">
+                <div class="round_q">
+                  <div class="round_item">
+                    <div class="round_i"></div>
+                    <div class="round_d">2023</div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>