猫王博物馆

src/pages/museum/detail.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class="app-container">
+    <img class="bg" :src="img" />
+    <view class="banner" flex between v-if="list.img">
+      <z-swiper ref="zSwiper" v-model="list.img" :options="options" style="width: 100%"
+        @slideChange="onChange">
+        <z-swiper-item v-for="(item, index) in list.img" :key="index">
+          <img :class="[active === index ? 'active' : 'unactive']" :src="item.url" />
+          <view class="name" :style="{color: list.color, visibility: active !== index ? 'hidden' : ''}">
+            {{ item.name }}
+          </view>
+        </z-swiper-item>
+      </z-swiper>
+    </view>
+  </view>
+</template>
+
+<script>
+import listJson from './dev.json'
+export default {
+  data() {
+    return {
+      img: '',
+      list: [],
+      active: 0,
+      options: {
+        spaceBetween: 20, // 图片之间的距离
+        loop: false, // 无限循环
+        effect: 'panorama',
+        slidesPerView: 3,
+        centeredSlides: true,
+        panorama: {
+          depth: 150,
+          rotate: 45,
+        },
+      }
+    }
+  },
+  onLoad(e) {
+    this.list = listJson[e.id - 1]
+    this.img = `../../static/museum/detail/${Number(e.id)}.png`
+    if (this.list.length > 0) {
+      this.options.loop = this.list.img.length > 2 ? true : false
+    }
+  },
+  methods: {
+    getLast() {
+      this.$refs.zSwiper.swiper.slidePrev();
+    },
+    getNext() {
+      this.$refs.zSwiper.swiper.slideNext();
+    },
+
+    onChange(swiper, index) {
+      this.active = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0;
+  position: relative;
+
+  .bg {
+    width: 100%;
+    display: block;
+  }
+
+  .banner {
+    position: absolute;
+    bottom: 200rpx;
+    left: 0;
+    width: 100%;
+    height: 318rpx;
+
+    .name {
+      position: absolute;
+      bottom: -60rpx;
+      left: 50%;
+      transform: translate(-50%);
+      font-weight: bold;
+      width: 100%;
+    }
+
+    .active {
+      position: relative;
+      width: 208rpx;
+      text-align: center;
+    }
+
+    .unactive {
+      opacity: 0.5;
+      width: 180rpx;
+      text-align: center;
+    }
+  }
+}
+
+::v-deep .swiper-3d .swiper-wrapper {
+  align-items: flex-end !important;
+
+  .swiper-slide {
+    text-align: center;
+    transform: rotateY(0) !important;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+}
+</style>

src/pages/museum/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <view class="app-container">
+    <view class="bg">
+      <view flex around class="tabs">
+        <img v-for="(item, index) in tabs" :key="index" :src="item" @click="getActive(index)" />
+      </view>
+    </view>
+    <view style="height: 1094rpx" />
+    <view class="dev" v-show="active === 0">
+      <view v-for="(item, index) in list" :key="index">
+        <view class="title">
+          <text>{{ item.title }}</text>
+        </view>
+        <view flex wrap :center="index === 1 || index === 2 ? true : false">
+          <view :style="{width: index === 1 || index === 2 ? '50%' : '33.33333%'}" v-for="(i, ind) in item.img"
+            :key="i.name" @click="getDetail(i)">
+            <img :src="i.url" style="width: 100%" />
+            <view :class="['name', item.img.length === 2 ? ind === 0 ? 'padding-left' : 'padding-right' : '']">{{ i.name }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="brandbg" v-show="active === 1">
+      <view class="content" flex>
+        <img class="scroll" src="../../static/museum/scroll.png" />
+        <img class="shadow_up" src="../../static/museum/shadow_up.png" />
+        <img class="shadow_down" src="../../static/museum/shadow_down.png" />
+
+        <swiper circular vertical display-multiple-items="5" :current="current" @change="handleChange">
+          <swiper-item v-for="item in swiperOptions" :key="item.value">
+            <view
+              :style="{color: value === item.value ? '#eaf5e8' : '#eaf5e866', fontSize: value === item.value ? '36rpx' : ''}">
+              {{ item.value }}
+            </view>
+          </swiper-item>
+        </swiper>
+        <view class="swiper_label" flex>
+          {{ swiperOptions[current].label }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import listJson from './img.json'
+export default {
+  data() {
+    return {
+      active: 0,
+      tabs: ['../../static/museum/devStory_active.png', '../../static/museum/brandStory.png'],
+      list: listJson,
+
+      // 年份
+      swiperOptions: [{
+        value: 2017,
+        label: '猫王音响2015年创立，即在京东众筹平台推出经典款收音机猫王2，43天时间1800台猫王2收音机提前售罄，金额超过360万元；',
+      }, {
+        value: 2016,
+        label: '2021年，推出原创中型size音箱猫王 · Mate系列，含Mate3跟Mate4两款，原创老牌歌手胡海泉成为Mate系列好声音推荐官；同年下旬，猫王音响成立子品牌猫王XOG，并推出猫王XOG · 机械光域Shell与猫王XOG · 机械光域Cube两款旗舰产品；'
+      }, {
+        value: 2015,
+        label: '2020年，猫王 · 潮无线Lucky蓝牙耳机在小红书首发上市，野性 mini发布；'
+      }, {
+        value: 2021,
+        label: '2019年发布首款跨品类新品猫王收音机·随身听、造型别致的猫王·音乐尾巴及全球首款全功能收音机猫王·旅行者1号。同年8月，知名创作歌手陈绮贞正式成为猫王收音机首位亚太区品牌代言人；'
+      }, {
+        value: 2020,
+        label: '2018年推出OhPlay猫王妙播APP，并同时发布搭载该系统的两款新品：联网音响猫王· 旅行者2号及超小size猫王· 原子唱机B612；同年在中国敦煌举办第二届电台复活节，收听人数破600万；'
+      }, {
+        value: 2019,
+        label: '2017年7月，在摩洛哥撒哈拉沙漠举办第一届电台复活节 ，携15位DJ进行24小时直播，有510万⼈通过QQ⾳乐、百度⾳乐、红⾖Live、喜⻢拉雅、荔枝FM、蜻蜓FM 6⼤平台共同倾听，创下电台⽂化史上的奇迹。同年还发布了子品牌猫王 · RADIOOO，推出六款主题系列产品；'
+      }, {
+        value: 2018,
+        label: '2016 年便推出了精致复古情调的爆款小王子OTR 系列，一年销售破百万台；'
+      }],
+      // 为了2015对齐光标 所以焦点索引-2
+      current: 0,
+      value: 2015
+    }
+  },
+  methods: {
+    getActive(index) {
+      if (this.active !== index) {
+        this.active = index
+        this.tabs = index === 0 ? ['../../static/museum/devStory_active.png', '../../static/museum/brandStory.png'] : ['../../static/museum/devStory.png', '../../static/museum/brandStory_active.png']
+      }
+    },
+    // 滚动年份
+    handleChange(e) {
+      this.current = e.detail.current
+      if (this.current === 5) {
+        this.value = 2017
+      } else if (this.current === 6) {
+        this.value = 2016
+      } else {
+        this.value = this.swiperOptions[this.current + 2].value
+      }
+    },
+
+    // 详情
+    getDetail(i) {
+      if (i.id) {
+        uni.navigateTo({
+          url: `/pages/museum/detail?id=${i.id}`
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.app-container {
+  position: relative;
+  padding: 0;
+
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: url('../../static/museum/bg.png') no-repeat 100% / 100%;
+    width: 100%;
+    height: 1094rpx;
+
+    .tabs {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      align-items: flex-start;
+      z-index: 99;
+
+      img {
+        width: 205rpx;
+      }
+    }
+  }
+
+  .dev {
+    padding-bottom: 240rpx;
+
+    .title {
+      height: 214rpx;
+      box-sizing: content-box;
+      position: relative;
+
+      text {
+        position: absolute;
+        bottom: 45rpx;
+        left: 50%;
+        transform: translate(-50%);
+        opacity: 0.64;
+      }
+    }
+
+    .name {
+      font-size: 24rpx;
+      opacity: 0.64;
+      text-align: center;
+    }
+
+    .line {
+      height: 144rpx;
+      position: absolute;
+      left: 0;
+      z-index: -1;
+    }
+  }
+
+  .brandbg {
+    background: url('../../static/museum/brand.png') no-repeat 100% / 100%;
+    width: 100%;
+    height: 3930rpx;
+    position: relative;
+    padding: 0 32rpx;
+
+    .content {
+      width: 100%;
+      position: absolute;
+      top: 1850rpx;
+      left: 32rpx;
+
+      .scroll {
+        width: 40rpx;
+        height: 584rpx;
+        margin-right: 48rpx;
+      }
+
+      .shadow_up,
+      .shadow_down {
+        position: absolute;
+        width: 100%;
+        height: 74rpx;
+        z-index: 99;
+      }
+
+      .shadow_up {
+        top: -2rpx;
+      }
+
+      .shadow_down {
+        bottom: 0;
+      }
+
+      swiper {
+        width: 200rpx;
+        height: 592rpx;
+
+        .active {
+          font-size: 36rpx;
+        }
+
+        swiper-item {
+          display: flex;
+          align-items: center;
+          width: 100%;
+        }
+      }
+
+      .swiper_label {
+        width: 100%;
+        padding-right: 62rpx;
+        font-size: 28rpx;
+        opacity: 0.7;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      .swiper_label::after {
+        content: '*可上下滑动查看';
+        margin-top: 24rpx;
+        font-size: 20rpx;
+        opacity: 0.4;
+      }
+    }
+  }
+}
+
+.padding-left {
+  padding-left: 128rpx;
+}
+
+.padding-right {
+  padding-right: 128rpx;
+}
+</style>