update web (#2034)

bltcn

2024-08-27 376467b1561ec1e1b73b018c6a2c0fefd52f9167

update web (#2034)

* commit web page vue

* optimize web page

* optimize web page

* remove other private component

* modify web page

* Update index.vue

* Update lxwjzxfw.vue

* Update sstx.vue

* update static file

* Update index.vue

* Update banner.vue

donate list

* Update banner.scss

donate list

* Update banner.vue

* Update banner.scss

 web-pages/src/views/home/assets/css/banner.scss

@@ -2,138 +2,143 @@
    width: 100%;
    height: p(942);
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-pagination {
      left: p(80);
      width: p(15) !important;
      top: 48% !important;
      // overflow: initial;
      .swiper-pagination-bullet {
        width: p(15);
        height: p(15) !important;
        border-radius: p(3);
        background: #1664ff !important;
        opacity: 1;
      }
      .swiper-pagination-bullet-active-next {
        transform: scale(0.33);
      }
      .swiper-pagination-bullet-active-prev {
        transform: scale(0.33);
      }
    }
    .hiddenPagination {
      .swiper-pagination {
        display: none;
      }
    }
    .item {
      width: 100%;
      height: 100%;
      position: relative;
      .banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .content {
        top: p(330);
        left: p(216);
        position: absolute;
        z-index: 2;
        display: flex;
        flex-direction: column;
        .yjqd {
          letter-spacing: 3px;
          color: #ffffff;
          font-size: p(68);
        }
        .text {
          font-size: p(17);
          letter-spacing: 1px;
          color: #d4d4d4;
        }
        .lxwm {
          color: #ffffff;
          font-size: p(16);
          width: p(124);
          height: p(38);
          background-color: #165dff;
          border-radius: 4px;
          text-align: center;
          line-height: p(38);
          margin-top: p(33);
          cursor: pointer;
        }
        .lxwm:hover {
          background-color: #316fff;
        }
  
        .jzmd-wrap {
          margin-top: p(63);
          .jzmd-title {
            position: relative;
            line-height: 1;
            padding-bottom: p(15);
            margin-bottom: p(21);
            font-size: p(22);
            font-weight: 700;
            color: #ffffff;
  
            &::after {
              content: "";
              position: absolute;
              bottom: 0;
              left: 0;
              width: 2em;
              height: p(2);
              background-color: #aeaeb7;
              border-radius: p(2);
            }
          }
          .jzmd-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            width: p(294);
            .jzmd-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: p(118);
              line-height: 1;
              margin-bottom: p(26);
              .name {
                font-size: p(16);
                color: #ffffff;
              }
              .num-text {
                display: flex;
                align-items: baseline;
                align-items: baseline;
                .text {
                  font-size: p(18);
                  color: #ffffff;
                }
                .unit {
                  font-size: p(14);
                  color: #ffffff;
                }
              }
            }
            &:after {
              content: "";
              width: p(118);
              height: 0;
            }
          }
        }
      }
    }
  }
  
    .swiper-pagination {
        left: p(80);
        width: p(15) !important;
        top: 48% !important;
        // overflow: initial;
        .swiper-pagination-bullet {
            width: p(15);
            height: p(15) !important;
            border-radius: p(3);
            background: #1664ff !important;
            opacity: 1;
        }
        .swiper-pagination-bullet-active-next {
            transform: scale(0.33);
        }
        .swiper-pagination-bullet-active-prev {
            transform: scale(0.33);
        }
    }
    .hiddenPagination {
        .swiper-pagination {
            display: none;
        }
    }
    .item {
        width: 100%;
        height: 100%;
        position: relative;
        .banner-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .content {
            top: p(330);
            left: p(216);
            position: absolute;
            z-index: 2;
            display: flex;
            flex-direction: column;
            .yjqd {
                letter-spacing: 3px;
                color: #ffffff;
                font-size: p(68);
            }
            .text {
                font-size: p(17);
                letter-spacing: 1px;
                color: #d4d4d4;
            }
            .lxwm {
                color: #ffffff;
                font-size: p(16);
                width: p(124);
                height: p(38);
                background-color: #165dff;
                border-radius: 4px;
                text-align: center;
                line-height: p(38);
                margin-top: p(33);
                cursor: pointer;
            }
            .lxwm:hover {
                background-color: #316fff;
            }

            .jzmd-wrap {
                margin-top: p(63);
                .jzmd-title {
                    position: relative;
                    line-height: 1;
                    padding-bottom: p(15);
                    margin-bottom: p(21);
                    font-size: p(22);
                    font-weight: 700;
                    color: #ffffff;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 2em;
                        height: p(2);
                        background-color: #aeaeb7;
                        border-radius: p(2);
                    }
                }
                .jzmd-content {
                    width: p(294);
                    height: p(207);
                    margin-left: 0;

                    .jzmd-row {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                    }

                    .jzmd-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: p(118);
                        line-height: 1;
                        margin-bottom: p(26);
                        .name {
                            font-size: p(16);
                            color: #ffffff;
                        }
                        .num-text {
                            display: flex;
                            align-items: baseline;
                            align-items: baseline;
                            .text {
                                font-size: p(18);
                                color: #ffffff;
                            }
                            .unit {
                                font-size: p(14);
                                color: #ffffff;
                            }
                        }
                    }
                    &:after {
                        content: '';
                        width: p(118);
                        height: 0;
                    }
                }
            }
        }
    }
}

 web-pages/src/views/home/banner.vue

@@ -1,195 +1,167 @@
<template>
  <div class="banner-comp">
    <div
      class="swiper-container"
      ref="swiper-container"
      :class="{ hiddenPagination: bannerList && bannerList.length < 2 }"
    >
      <div class="swiper-wrapper">
    <div class="banner-comp">
        <div
          class="swiper-slide"
          v-for="(item, index) in bannerList"
          :key="index"
            class="swiper-container"
            ref="swiper-container"
            :class="{ hiddenPagination: bannerList && bannerList.length < 2 }"
        >
          <div class="item">
            <img class="banner-bg" :src="item.url" alt="" />
            <div v-if="item.flag === 1" class="content">
              <h3 class="yjqd">一键启动FUNASR</h3>
              <p class="text">
                FUNASR希望在语音识别的学术研究和工业应用之间架起一座桥梁。通过发布工业级<br />
                语音识别模型的训练和微调，研究人员和开发人员可以更方便地进行语音识别模型的<br />
                研究和生产，并推动语音识别生态的发展。让语音识别更有趣！
              </p>
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
                    <div class="item">
                        <img class="banner-bg" :src="item.url" alt />
                        <div v-if="item.flag === 1" class="content">
                            <h3 class="yjqd">一键启动FUNASR</h3>
                            <p class="text">
                                FUNASR希望在语音识别的学术研究和工业应用之间架起一座桥梁。通过发布工业级
                                <br />语音识别模型的训练和微调，研究人员和开发人员可以更方便地进行语音识别模型的
                                <br />研究和生产，并推动语音识别生态的发展。让语音识别更有趣！
                            </p>

              <div class="lxwm">联系我们</div>
              <div class="jzmd-wrap">
                <div class="jzmd-title">捐赠名单</div>
                <div class="jzmd-content">
                  <div
                    class="jzmd-item"
                    v-for="(item, index) in jzmdList"
                    :key="index"
                  >
                    <div class="name">{{ item.name }}</div>
                    <div class="num-text">
                      <span class="text">{{ item.num }}</span>
                      <span class="unit">元</span>
                            <div class="lxwm">联系我们</div>
                            <div class="jzmd-wrap">
                                <div class="jzmd-title">捐赠名单</div>
                                <div class="jzmd-content swiper-container" ref="jzmd-swiper">
                                    <div class="swiper-wrapper">
                                        <div
                                            class="jzmd-row swiper-slide"
                                            v-for="(item,index) in jzmdRows"
                                            :key="index"
                                        >
                                            <div class="jzmd-item" v-if="jzmdList[2 * (item -1)]">
                                                <div class="name">{{ jzmdList[2 * (item -1)].name }}</div>
                                                <div class="num-text">
                                                    <span class="text">{{ jzmdList[2 * (item -1)].num }}</span>
                                                    <span class="unit">元</span>
                                                </div>
                                            </div>
                                            <div class="jzmd-item" v-if="jzmdList[2 * (item -1) + 1]">
                                                <div class="name">{{ jzmdList[2 * (item -1) + 1].name }}</div>
                                                <div class="num-text">
                                                    <span class="text">{{ jzmdList[2 * (item -1) + 1].num }}</span>
                                                    <span class="unit">元</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="swiper-pagination"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import Swiper from 'swiper'
export default {
  name: "banner-comp",
  data() {
    return {
      bannerList: [
        {
          flag: 1,
          url: require("./assets/images/banner.png"),
        },
      ],
      swiperObj: null,
      jzmdList: [
        {
          name: "程俊陶",
          num: 300,
        },
        {
          name: "黄明",
          num: 236,
        },
        {
          name: "高志付",
          num: 235,
        },
        {
          name: "陈翔",
          num: 200,
        },
        {
          name: "夏侯杰",
          num: 200,
        },
        {
          name: "黄药师",
          num: 198,
        },
        {
          name: "肖炜",
          num: 100,
        },
        {
          name: "刘柱",
          num: 100,
        },
        {
          name: "黄水杯",
          num: 85,
        },
        {
          name: "子龙",
          num: 85,
        },
        {
          name: "梁浩锋",
          num: 66,
        },
        {
          name: "Alan",
          num: 66,
        },
        {
          name: "橙汁",
          num: 50,
        },
        {
          name: "马勇",
          num: 50,
        },
        {
          name: "车先生",
          num: 30.66,
        },
        {
          name: "陈书东",
          num: 22.22,
        },
        {
          name: "葵",
          num: 22,
        },
        {
          name: "H2G2",
          num: 20.24,
        },
        {
          name: "白明智",
          num: 20,
        },
        {
          name: "向前一标",
          num: 20,
        },
        {
          name: "Hey Song",
          num: 20,
        },
        {
          name: "javaweh",
          num: 20,
        },
        {
          name: "刘志伟",
          num: 20,
        },
        {
          name: "打鸟肉的小剑侍",
          num: 10,
        },
        {
          name: "小邓",
          num: 10,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initSwiper();
    });
  },
  methods: {
    initSwiper() {
      if (this.swiperObj) {
        this.swiperObj.destroy();
      }
      // const that = this
      this.swiperObj = new Swiper(this.$refs["swiper-container"], {
        slidesPerView: 1,
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
        },
        on: {
          slideChangeTransitionEnd: function () {},
          init: function () {},
        },
      });
    name: 'banner-comp',
    data () {
        return {
            bannerList: [
                {
                    flag: 1,
                    url: require('./assets/images/banner.png')
                }
            ],
            swiperObj: null,
            jzmdSwiperObj: null,
            jzmdList: [
                {
                    name: '程俊陶',
                    num: 300
                },
                {
                    name: '黄明',
                    num: 236
                },
                {
                    name: '高志付',
                    num: 235
                },
                {
                    name: '陈翔',
                    num: 200
                },
                {
                    name: '夏侯杰',
                    num: 200
                },
                {
                    name: '黄药师',
                    num: 198
                },
                {
                    name: '肖炜',
                    num: 100
                },
                {
                    name: '刘柱',
                    num: 100
                },
                {
                    name: '黄水杯',
                    num: 85
                },
                {
                    name: '子龙',
                    num: 85
                }
            ]
        }
    },
  },
};
    computed: {
        jzmdRows () {
            return Math.ceil(this.jzmdList.length / 2)
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.initSwiper()
        })
        this.initJzmdSwiper()
    },
    methods: {
        initSwiper () {
            if (this.swiperObj) {
                this.swiperObj.destroy()
            }
            // const that = this
            this.swiperObj = new Swiper(this.$refs['swiper-container'], {
                slidesPerView: 1,
                direction: 'vertical',
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true
                },
                on: {
                    slideChangeTransitionEnd: function () {},
                    init: function () {}
                }
            })
        },
        initJzmdSwiper () {
            if (this.jzmdSwiperObj) {
                this.jzmdSwiperObj.destroy()
            }
            // const that = this
            this.jzmdSwiperObj = new Swiper(this.$refs['jzmd-swiper'], {
                direction: 'vertical',
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                slidesPerView: 5,
                slidesPerGroup: 1,
                loop: true,
                loopedSlides: 7
            })
        }
    }
}
</script>
<style src="./assets/css/banner.scss" lang="scss"></style>