【春节特辑】不能出去旅游？来逛逛数字博物馆

编程语言 2022-01-18 11:16:24 阅读次数: 0

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

一、前言

往年春节，我们全家喜欢自驾游到祖国各地逛逛，这两年因为疫情原因，已经两年没有全家一起自驾游了，甚至连回家也变的奢侈了。

每到一个城市，我喜欢逛当地的博物馆，这些博物馆里既有优秀的历史文物，也记载了一座城市从古至今的变迁。记得前几年百度推出了数字博物馆，我体验之后，不禁感叹做的有意思。今年春节，不知道能不能回家过年，但是数字博物馆的想法出现在我脑海里，于是我想不如在我自己的小程序里面仿照百度实现一个数字博物馆，让家人也体验一把不出门，就能逛博物馆的感觉。

二、举世闻名的曾侯乙编钟

很多年前去武汉旅游，参观了湖北省博物馆，曾侯乙编钟就陈列在一楼，封闭展示，四周是玻璃，可以让游客驻足观赏。

湖北省博物馆很大，有很多藏品，但是给我留下映象最深的还是曾侯乙编钟，因为它是我见过的最大的青铜器。参观完我还去听了演奏节目。

如果今后有机会去武汉，我还会再去一趟湖北省博物馆，因为每次看到曾侯乙编钟，即使是在图片上，我还是感到很震撼。

三、百度数字博物馆的精妙之处

我作为一个旅游和历史爱好者，由衷佩服百度能把线上博物馆做的这么有趣。

以往，我们从网络上了解一个博物馆或者一件文物，都是通过图文介绍，有时候文字太长，可能看不进去，或者看完记不住。

百度的数字博物馆，加了设计的交互，让原本的图文变的生动了很多。其中曾侯乙编钟作为专题，交互更加细致。它将曾侯乙编钟进行了拆分，每个知识点用不同的交互进行演示，让观看的人有种身临其境的感觉。

四、复刻与创造

既然感到有意思，不免心痒手痒，加上因为疫情春节也没法出去旅游，于是决定在自己的小程序里面复刻一个数字博物馆。当然了博物馆很庞大，我决定从喜爱的文物着手，首先想到的是曾侯乙编钟。

4.1 UI

页面配色是由厚重的黑色、编钟原有的红色、百搭的白色以及高亮的黄色共同组成。

页面布局由中间醒目的编钟完整图片和上线两排导航组成。

页面交互主要是每个导航点击触发文字高亮和展示/关闭导航模块内容的过渡动画，而每个导航模块中的交互也各不相同，下面会详细介绍。

image.png

4.2 框架设计

每个导航的切换方式、内容结果和关闭交互都是一致的。

整体的设计如下图：

来逛逛数字博物馆01.jpg

4.3 逐步完成

因为是同一个页面，所以我在做结构设计的时候，对每一个模块设置对应的key值，用来区分当前展示内容。

4.3.1 初始模块

UI

image.png

zenghouyi.wxml

1）我将不同模块的展示放到了wxs中进行统一处理，根据当前展示模块的key和代码中的key值是否一致来判断是否展示。pageType：当前展示的模块key值

2）导航列表分上下两列，通过定位进行展示处理；

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home" style="display:{{ script.getDisplayVal(pageType, 'home') }}">
    <view wx:for="{{ navList }}" wx:key="navIndex" wx:for-item="navItem" class="home-item" bindtap="getItemShow" data-item="{{ navItem }}" style="top:{{ navItem.top ? navItem.top + 'px' : '' }};bottom:{{ navItem.bottom ? navItem.bottom + 'px' : '' }};left:{{ navItem.left + '%' }};">
      <view class="home-item-box">
        <view class="home-item-title" hover-class="home-item-title-curr" style="bottom:{{ navItem.id < 5 ? '32rpx' : '52rpx' }}">{{ navItem.name }}</view>
        <image src="../../images/zenghouyi/nav-bg-up.png" class="home-item-bg" wx-if="{{ navItem.id < 5 }}"></image>
        <image src="../../images/zenghouyi/nav-bg-down.png" class="home-item-bg" wx-if="{{ navItem.id > 4 }}"></image>
      </view>
    </view>
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E7%BC%96%E9%92%9F%E6%8A%A0%E5%9B%BE.jpg" class="home-main"></image>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    pageType: 'home', // 页面type值 区分展示模块
    navList: [
      // 主模块-导航列表
      {
        id: 1,
        name: '结构',
        top: 10,
        left: 5,
        key: 'jiegou',
      },
      {
        id: 2,
        name: '细节',
        top: 10,
        left: 30,
        key: 'xijie',
      },
      {
        id: 3,
        name: '译文',
        top: 10,
        left: 55,
        key: 'yiwen',
      },
      {
        id: 4,
        name: '奏乐',
        top: 10,
        left: 80,
        key: 'zouyue',
      },
      {
        id: 5,
        name: '钮钟',
        bottom: 10,
        left: 5,
        key: 'niuzhong',
      },
      {
        id: 6,
        name: '甬钟',
        bottom: 10,
        left: 30,
        key: 'yongzhong',
      },
      {
        id: 7,
        name: '镈钟',
        bottom: 10,
        left: 55,
        key: 'bozhong',
      },
      {
        id: 8,
        name: '分享',
        bottom: 10,
        left: 80,
        key: 'fenxiang',
      },
    ], // 主模块-导航数组
  },

  /**
   * 导航点击事件-切换当前需要展示的模块内容
   */
  getItemShow(e) {
    let item = e.currentTarget.dataset.item;
    // =>true: 设置细节当前展示的item项
    if (item.key === 'xijie') {
      let { xijie, xijieFlag } = this.data;
      this.setData({
        xijieItem: xijie.enum[xijieFlag],
      });
    } else if (item.key === 'zouyue') {
      // =>true: 设置奏乐当前展示的item项
      let { zouyue, zouyueFlag } = this.data;
      this.setData({
        zouyueItem: zouyue.enum[zouyueFlag],
      });
    }
    this.setData({
      pageType: item.key,
    });
  },
});
复制代码

zenghouyi.wxss

.container {
  height: 100vh;
  background: rgb(58, 58, 58);
  padding-top: 40rpx;
  position: relative;
}
.container-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 10;
}
.home {
  width: 100%;
  height: 800rpx;
  position: relative;
  z-index: 99;
  animation: homeTwinkle 0.5s linear 0s 1 forwards;
}
@keyframes homeTwinkle {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
.home-close {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 999;
}
.home-center {
  margin: 0 30rpx;
  padding-top: 80rpx;
  height: 100%;
  position: relative;
}
.home-item {
  position: absolute;
  width: 76rpx;
  height: 175rpx;
}
.home-item-box {
  position: relative;
}
.home-item-title {
  position: absolute;
  left: 0;
  color: #fff;
  font-size: 32rpx;
  writing-mode: vertical-lr;
  line-height: 76rpx;
  letter-spacing: 18rpx;
  font-weight: 600;
}
.home-item-title-curr {
  color: #e9d27b;
}
.home-item-bg {
  width: 76rpx;
  height: 175rpx;
}
.home-main {
  width: 100%;
  height: 288rpx;
  margin-top: 260rpx;
}
复制代码

4.3.2 结构模块

UI

1）尺寸展示

image.png

2）结构展示

image.png

zenghouyi.wxml

1）结构模块的导航分为尺寸和结构，默认选中尺寸，展示编钟尺寸数值。切换结构之后，会展示结构下的上层、中层、下层这三个位置导航；位置导航切换时，会高亮编钟对应位置，其中下层中间位置的镈钟做了一个闪烁的动效；

2）上中下三层位置的高亮通过css中的box-shadow实现；

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home jiegou" style="display:{{ script.getDisplayVal(pageType, 'jiegou') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="jiegou"></image>
    <view class="jiegou-image">
      <view class="jiegou-image-box">
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/10%E9%92%9F%E6%9E%B6%E9%A1%B5_%E5%B0%BA%E5%AF%B8%E7%BA%BF.png" class="jiegou-image-sizeTag" wx-if="{{ jiegouFlag === 'size' }}"></image>
        <view class="jiegou-image-topHighlight" wx-if="{{ jiegouTextFlag === 'structureTop' }}"></view>
        <view class="jiegou-image-middleHighlight" wx-if="{{ jiegouTextFlag === 'structureMiddle' }}"></view>
        <view class="jiegou-image-bottomHighlight" wx-if="{{ jiegouTextFlag === 'structureBottom' }}"></view>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/10%E9%92%9F%E6%9E%B6%E9%A1%B5_%E9%95%88%E9%92%9F%E9%97%AA-%E5%9B%BE.png" class="jiegou-image-structureTwinkle" wx-if="{{ jiegouTextFlag === 'structure' || jiegouTextFlag === 'structureBottom' }}"></image>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/10%E9%92%9F%E6%9E%B6%E9%A1%B5_%E7%BC%96%E9%92%9F%E5%AE%8C%E6%95%B4.jpg" class="jiegou-image-all"></image>
      </view>
      <view class="jiegou-image-text">{{ jiegou.text[jiegouTextFlag] }}</view>
    </view>
    <!-- 结构导航 -->
    <view class="jiegou-structure-nav" wx-if="{{ jiegouFlag === 'structure' }}">
      <view wx:for="{{ jiegou.structureList }}" wx:key="navIndex" wx:for-item="navItem" class="jiegou-structure-item" bindtap="jiegouStructureNavChange" data-item="{{ navItem }}">
        <view class="jiegou-structure-item-box {{ navItem.key === jiegouTextFlag ? 'jiegou-structure-item-curr' : '' }}">
          <view class="jiegou-structure-nav-title">{{ navItem.name }}</view>
        </view>
      </view>
    </view>
    <view class="jiegou-nav">
      <view wx:for="{{ jiegou.list }}" wx:key="navIndex" wx:for-item="navItem" class="jiegou-item" bindtap="jiegouNavChange" data-item="{{ navItem }}">
        <view class="jiegou-item-box">
          <view class="jiegou-item-title {{ navItem.key === jiegouFlag ? 'jiegou-item-title-curr' : '' }}">{{ navItem.name }}</view>
          <image src="../../images/zenghouyi/title-bg.png" class="jiegou-item-bg"></image>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    jiegouFlag: 'size', // 结构-展示内容的flag值
    jiegouTextFlag: 'size', // 结构-结构分类-展示内容的flag值
    jiegou: {
      // 结构-数据对象
      flag: 'size',
      list: [
        {
          key: 'size',
          name: '尺 寸',
        },
        {
          key: 'structure',
          name: '结 构',
        },
      ],
      structureList: [
        {
          key: 'structureTop',
          name: '上 层',
        },
        {
          key: 'structureMiddle',
          name: '中 层',
        },
        {
          key: 'structureBottom',
          name: '下 层',
        },
      ],
      text: {
        size: '曾侯乙编钟，长7.48米，宽3.35米，高2.73米。重2567公斤。',
        structure: '钟架分三层八组悬挂着65件青铜钟。',
        structureTop: '上层分三组钮钟，19件。',
        structureMiddle: '中层分三组甬钟，33件。',
        structureBottom: '下层为两组大型长枚甬钟，12件。下层正中悬挂的是楚惠王送给曾侯乙的意见镈钟。',
      },
    },
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'jiegou') {
      this.setData({
        jiegouFlag: 'size',
        jiegouTextFlag: 'size',
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 结构-切换底部导航
   */
  jiegouNavChange(e) {
    let item = e.currentTarget.dataset.item;
    let jiegouFlag = item.key;
    let jiegouTextFlag = item.key;
    this.setData({
      jiegouFlag: jiegouFlag,
      jiegouTextFlag: jiegouTextFlag,
    });
  },
  /**
   * 结构-结构-切换导航
   */
  jiegouStructureNavChange(e) {
    let item = e.currentTarget.dataset.item;
    let jiegouTextFlag = item.key;
    this.setData({
      jiegouTextFlag: jiegouTextFlag,
    });
  },
});
复制代码

zenghouyi.wxss

.jiegou {
  padding-top: 30rpx;
}
.jiegou-image {
  width: 100%;
  height: 480rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.jiegou-image-text {
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  margin-top: 10rpx;
  font-weight: 300;
  position: absolute;
  bottom: 20rpx;
  z-index: 999;
  width: 100%;
}
.jiegou-image-box {
  width: 100%;
  height: 380rpx;
  position: relative;
}
.jiegou-image-sizeTag {
  width: 730rpx;
  height: 320rpx;
  display: block;
  position: absolute;
  top: 0;
  left: 10rpx;
  z-index: 30;
}
.jiegou-image-topHighlight {
  width: 494rpx;
  height: 46rpx;
  display: block;
  position: absolute;
  top: 69rpx;
  left: 97rpx;
  z-index: 50;
  box-shadow: 0 0 0 195rpx rgb(0, 0, 0, 0.6);
}
.jiegou-image-middleHighlight {
  width: 539rpx;
  height: 50rpx;
  display: block;
  position: absolute;
  top: 118rpx;
  left: 94rpx;
  z-index: 50;
  box-shadow: 0 0 0 150rpx rgb(0, 0, 0, 0.6);
}
.jiegou-image-bottomHighlight {
  width: 509rpx;
  height: 73rpx;
  display: block;
  position: absolute;
  top: 199rpx;
  left: 102rpx;
  z-index: 50;
  box-shadow: 0 0 0 135rpx rgb(0, 0, 0, 0.6);
}
.jiegou-image-structureTwinkle {
  width: 45rpx;
  height: 67rpx;
  display: block;
  position: absolute;
  bottom: 115rpx;
  left: 362rpx;
  z-index: 50;
  animation: structureTwinkle 1s linear 0s infinite forwards;
}
@keyframes structureTwinkle {
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
}
.jiegou-image-all {
  position: absolute;
  top: 10rpx;
  left: 20rpx;
  width: 700rpx;
  height: 300rpx;
  z-index: 20;
}

.jiegou-nav {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 140rpx;
}
.jiegou-item {
  width: 154rpx;
  height: 88rpx;
}
.jiegou-item-bg {
  width: 154rpx;
  height: 88rpx;
}
.jiegou-item-box {
  width: 154rpx;
  height: 88rpx;
  position: relative;
}
.jiegou-item-title {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -40rpx;
  margin-top: -22rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  width: 80rpx;
  height: 44rpx;
}
.jiegou-item-title-curr {
  color: #e9d27b;
  font-size: 300;
}
.jiegou-structure-nav {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 155rpx;
}
.jiegou-structure-item-box {
  border: 2px solid #56080a;
  height: 40rpx;
  width: 120rpx;
  margin-bottom: 8rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jiegou-structure-item-curr {
  border-color: #920000;
}
.jiegou-structure-nav-title {
  width: 110rpx;
  height: 30rpx;
  background: #56080a;
  color: #fff;
  font-size: 20rpx;
}
.jiegou-structure-item-curr .jiegou-structure-nav-title {
  background: #920000;
}
复制代码

4.3.3 细节模块

UI

image.png

zenghouyi.wxml

细节模块的导航为标音铭文、记事铭文、钟架、配件四项；切换展示不同图片和文案介绍。

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home xijie" style="display:{{ script.getDisplayVal(pageType, 'xijie') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="xijie"></image>
    <view class="home-center">
      <view class="xijie-nav">
        <view wx:for="{{ xijie.list }}" wx:key="navIndex" wx:for-item="navItem" class="xijie-item" bindtap="xijieGetItemShow" data-item="{{ navItem }}">
          <view class="xijie-item-box {{ navItem.key === xijieFlag ? 'xijie-item-curr' : '' }}">
            <view class="xijie-item-title">{{ xijie.enum[navItem.key].name }}</view>
          </view>
        </view>
      </view>
      <view class="xijie-content">
        <view class="xijie-content-img">
          <image src="{{ xijieItem.src }}"></image>
        </view>
        <view class="xijie-introduce">
          <view class="xijie-introduce-title">{{ xijieItem.name }}</view>
          <view class="xijie-introduce-text">{{ xijieItem.introduce }}</view>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    xijieFlag: 'bymw', // 细节-展示内容的flag值
    xijie: {
      // 细节-数据对象
      list: [
        {
          key: 'bymw',
        },
        {
          key: 'jsmw',
        },
        {
          key: 'zj',
        },
        {
          key: 'pj',
        },
      ],
      enum: {
        bymw: {
          name: '标音铭文',
          introduce: '钟架、钟钩、钟体上共有铭文3755字，内容为编号、记事、标音和乐律理论、铭文多数错金。标音铭文标示了钟的悬挂位置或敲击部位及其所发音的名称。',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%A0%87%E9%9F%B3%E5%9B%BE1.jpg',
        },
        jsmw: {
          name: '记事铭文',
          introduce: '全部甬钟的记事铭文均有 “曾侯乙作持”5字，标明钟的制作和享用者是曾侯乙。曾侯乙，姓姬名乙。“曾”是国名，“侯”是爵位，“乙”是名字，“曾侯乙”即战国时期曾国一位名叫“乙”的君主。',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E8%AE%B0%E4%BA%8B%E5%9B%BE1.jpg',
        },
        zj: {
          name: '钟架',
          introduce: '由六个青铜佩剑',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E9%92%9F%E6%9E%B6%E5%9B%BE1.jpg',
        },
        pj: {
          name: '配件',
          introduce: '钟架、钟钩、钟体上共有铭文3755字，内容为编号、记事、标音和乐律理论、铭文多数错金。标音铭文标示了钟的悬挂位置或敲击部位及其所发音的名称。',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E9%85%8D%E4%BB%B6%E5%9B%BE1.jpg',
        },
      },
    },
    xijieItem: {}, // 细节-当前选中的对象变量
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'xijie') {
      this.setData({
        xijieItem: {},
        xijieFlag: 'bymw',
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 细节-切换导航
   */
  xijieGetItemShow(e) {
    let item = e.currentTarget.dataset.item;
    let xijie = this.data.xijie;
    this.setData({
      xijieFlag: item.key,
      xijieItem: xijie.enum[item.key],
    });
  },
});
复制代码

zenghouyi.wxss

.xijie-nav {
  position: absolute;
  top: 80rpx;
  left: 0;
  z-index: 99;
  height: 380rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.xijie-item-box {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #851a11;
  background: #211211;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xijie-item-title {
  width: 60rpx;
  height: 60rpx;
  padding: 2rpx;
  border: 2rpx solid #811911;
  background: #430906;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xijie-item-curr .xijie-item-title {
  color: #ebd273;
}
.xijie-content {
  position: absolute;
  top: 80rpx;
  left: 0;
  z-index: 59;
  width: 100%;
}
.xijie-content-img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 366rpx;
  margin-bottom: 60rpx;
}
.xijie-content-img image {
  width: 560rpx;
  height: 360rpx;
  border: 4rpx solid #fff;
}
.xijie-introduce {
  width: 100%;
  color: #fff;
}
.xijie-introduce-title {
  height: 60rpx;
  border-bottom: 1px solid #fff;
  text-align: left;
  font-size: 32rpx;
  padding-left: 30rpx;
}

.xijie-introduce-text {
  width: 80%;
  margin: 0 auto;
  font-size: 28rpx;
  line-height: 1.5;
  margin-top: 30rpx;
  font-weight: 300;
}
复制代码

4.3.4 译文模块

UI

image.png

zenghouyi.wxml

译文的古文和现代对照通过图片翻转效果实现，翻转效果由transform的旋转属性实现。

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home yiwen" style="display:{{ script.getDisplayVal(pageType, 'yiwen') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="yiwen"></image>
    <view class="home-center">
      <view class="yiwen-top">
        <view class="yiwen-top-box {{ yiwenFlag === 'old' ? 'yiwen-top-curr-old' : 'yiwen-top-curr-new' }}" bindtap="yiwenChange">
          <image src="{{ yiwen.old }}" class="yiwen-top-img yiwen-top-old"></image>
          <image src="{{ yiwen.new }}" class="yiwen-top-img yiwen-top-new"></image>
        </view>
        <view class="yiwen-top-text">
          {{ yiwen.text }}
        </view>
      </view>
      <view class="yiwen-introduce">
        <view class="xijie-introduce-title">{{ yiwen.name }}</view>
        <view class="yiwen-introduce-text">
          <view wx:for="{{ yiwen.introduce }}" wx:key="navIndex" wx:for-item="navTextItem" class="yiwen-introduce-item">
            {{ navTextItem }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    yiwenFlag: 'old',
    yiwen: {
      text: '点击铭文图片查看古文对照',
      // 译文-对象变量
      old: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/8%E9%95%88%E9%92%9F%E9%A1%B5_%E9%93%AD%E6%96%87%E6%94%BE%E5%A4%A7%E5%9B%BE-%E9%93%AD.jpg',
      new: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/8%E9%95%88%E9%92%9F%E9%A1%B5_%E9%93%AD%E6%96%87%E6%94%BE%E5%A4%A7%E5%9B%BE-%E8%AF%91.jpg',
      name: '现代译文',
      introduce: ['这篇铭文告诉我们，这件镈钟是楚惠王熊章为曾侯乙制作的一套宗庙祭器之一，放置在西阳，其铭文纪年为楚惠王五十六年，即公元前433年。', '也有学者认为，古书中“返”与“报”两字常互相代用，“报”即报丧的意思。铭文中的“返自西阳”应解释为从西阳得到曾侯乙去世的消息后，楚惠王为曾侯乙制作了镈钟这件祭器。'],
    },
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'yewei') {
      this.setData({
        yeweiFlag: 'old',
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 译文-按钮点击
   */
  yiwenChange() {
    let yiwenFlag = this.data.yiwenFlag;
    yiwenFlag = yiwenFlag === 'new' ? 'old' : 'new';
    this.setData({
      yiwenFlag: yiwenFlag,
    });
  },
});
复制代码

zenghouyi.wxss

.yiwen-top {
  height: 529rpx;
  display: flex;
  align-items: center;
  padding-left: 200rpx;
}
.yiwen-top-box {
  position: relative;
  width: 288rpx;
  height: 529rpx;
  transition: transform 1s;
  transform-style: preserve-3d;
}
.yiwen-top-curr-old {
  transform: rotateY(0);
}
.yiwen-top-curr-new {
  transform: rotateY(180deg);
}
.yiwen-top-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 288rpx;
  height: 529rpx;
  z-index: 99;
  backface-visibility: hidden;
}
.yiwen-top-new {
  transform: rotateY(180deg);
}
.yiwen-introduce {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 24rpx;
}
.yiwen-top-text {
  width: 50rpx;
  background: #211211;
  color: #fff;
  margin-left: 30rpx;
  font-size: 28rpx;
}
.yiwen-introduce-text {
  margin-top: 30rpx;
  font-weight: 300;
  font-size: 24rpx;
}
复制代码

4.3.5 奏乐模块

UI

image.png

zenghouyi.wxml

微信小程序提供了媒体组件video，具体使用可以参考官方文档

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home zouyue" style="display:{{ script.getDisplayVal(pageType, 'zouyue') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="zouyue"></image>
    <view class="home-center">
      <view class="zouyue-top">
        <view class="zouyue-top-img">
          <image src="{{ zouyueItem.src }}"></image>
        </view>
        <view class="zouyue-introduce">
          <view class="zouyue-introduce-title">{{ zouyue.name }}</view>
          <view class="zouyue-introduce-text">{{ zouyue.introduce }}</view>
        </view>
      </view>
      <view class="zouyue-video">
        <video controls="true" id="video" src="{{ zouyueItem.video }}" bindplay="onVideoPlay" object-fit="cover" poster="{{ zouyueItem.src }}"></video>
      </view>
      <view class="zouyue-nav">
        <view wx:for="{{ zouyue.list }}" wx:key="navIndex" wx:for-item="navItem" class="zouyue-item" bindtap="zouyueGetItemShow" data-item="{{ navItem }}">
          <view class="zouyue-item-box {{ navItem.key === zouyueFlag ? 'zouyue-item-curr' : '' }}">
            <view class="zouyue-item-title">{{ zouyue.enum[navItem.key].name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    zouyueFlag: 'cs', // 奏乐-展示内容的flag值
    zouyue: {
      // 奏乐-对象变量
      name: '奏乐',
      introduce: '编钟音域宽广，跨越五个半八度，只比现代钢琴少一个八度，中心音域12个半音齐全。',
      list: [
        {
          key: 'cs',
        },
        {
          key: 'gs',
        },
        {
          key: 'cjhyy',
        },
        {
          key: 'dfg',
        },
      ],
      enum: {
        cs: {
          name: '楚商',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%A5%9A%E5%95%86.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%A5%9A%E5%95%86%E7%89%87%E6%AE%B5.mp3',
        },
        gs: {
          name: '国殇',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%9B%BD%E6%AE%87.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%9B%BD%E6%AE%87%E7%89%87%E6%AE%B5.mp3',
        },
        cjhyy: {
          name: '春江花月夜',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%98%A5%E6%B1%9F.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%98%A5%E6%B1%9F%E8%8A%B1%E6%9C%88%E5%A4%9C%E7%89%87%E6%AE%B5.mp3',
        },
        dfg: {
          name: '东方红',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E4%B8%9C%E6%96%B9.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E4%B8%9C%E6%96%B9%E7%BA%A2.mp3',
        },
      },
    },
    zouyueItem: {}, // 奏乐-当前选中的对象变量
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'zouyue') {
      let { zouyue } = this.data;
      let zouyueFlag = 'cs';
      this.setData({
        zouyueItem: zouyue.enum[zouyueFlag],
        zouyueFlag: 'cs',
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 奏乐-切换导航
   */
  zouyueGetItemShow(e) {
    let item = e.currentTarget.dataset.item;
    let zouyue = this.data.zouyue;
    this.setData({
      zouyueFlag: item.key,
      zouyueItem: zouyue.enum[item.key],
    });
  },
  /**
   * 奏乐-播放
   */
  onVideoPlay() {
    //播放
    disabled.ispay = true;
  },
});
复制代码

zenghouyi.wxss

.zouyue-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}
.zouyue-top-img {
  width: 347rpx;
  border: 2rpx solid #851a11;
  background: #211211;
  height: 324rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zouyue-top-img image {
  width: 317rpx;
  height: 294rpx;
  display: block;
}
.zouyue-introduce {
  width: 48%;
  color: #fff;
  margin-left: 20rpx;
}
.zouyue-introduce-title {
  height: 60rpx;
  border-bottom: 1px solid #fff;
  text-align: left;
  font-size: 32rpx;
  padding-left: 30rpx;
}

.zouyue-introduce-text {
  width: 80%;
  margin: 30rpx auto 0;
  font-size: 28rpx;
  color: #fff;
  line-height: 1.5;
  font-weight: 300;
}
.zouyue-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.zouyue-item-box {
  width: 140rpx;
  height: 70rpx;
  border: 2rpx solid #851a11;
  background: #211211;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zouyue-item-title {
  width: 120rpx;
  height: 50rpx;
  padding: 2rpx;
  border: 2rpx solid #811911;
  background: #430906;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zouyue-item-curr .zouyue-item-title {
  color: #ebd273;
}
.zouyue-video video {
  width: 700rpx;
  height: 300rpx;
  margin: 0 auto;
}
复制代码

4.3.6 钮钟模块

UI

image.png

zenghouyi.wxml

页面顶部的每个钮钟都可以点击，点击之后有左右晃动的动态交互。

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home niuzhong" style="display:{{ script.getDisplayVal(pageType, 'niuzhong') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="niuzhong"></image>
    <view class="home-center">
      <view class="niuzhong-top">
        <view wx:for="{{ niuzhong.list }}" wx:key="navIndex" wx:for-item="navItem" class="niuzhong-item {{ navItem.className }} {{ niuzhongImgIndex === navItem.id ? 'niuzhong-item-animation' : '' }}" bindtap="niuzhongGetImgIndex" data-item="{{ navItem }}">
          <image src="{{ navItem.src }}"></image>
        </view>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_%E9%92%9F%E6%9E%B6.png" class="niuzhong-top-bg"></image>
      </view>
      <view class="niuzhong-introduce">
        <view class="zouyue-introduce-title">{{ niuzhong.name }}</view>
        <view class="niuzhong-introduce-box">
          <view wx:for="{{ niuzhong.introduce }}" wx:key="navIndex" wx:for-item="navItem" class="niuzhong-introduce-item">
            <view class="niuzhong-introduce-title">{{ navItem.title }}：</view>
            <view class="niuzhong-introduce-text">
              <view wx:for="{{ navItem.text }}" wx:key="navIndex" wx:for-item="navTextItem" class="niuzhong-introduce-text-item">
                {{ navTextItem }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    niuzhongImgIndex: null,
    niuzhong: {
      // 钮钟-对象变量
      name: '钮钟',
      list: [
        {
          id: 0,
          className: 'niuzhong-item1',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_1.png',
        },
        {
          id: 1,
          className: 'niuzhong-item2',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_2.png',
        },
        {
          id: 2,
          className: 'niuzhong-item3',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_3.png',
        },
        {
          id: 3,
          className: 'niuzhong-item4',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_4.png',
        },
        {
          id: 4,
          className: 'niuzhong-item5',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_5.png',
        },
        {
          id: 5,
          className: 'niuzhong-item6',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_6.png',
        },
        {
          id: 6,
          className: 'niuzhong-item7',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_7.png',
        },
      ],
      introduce: [
        {
          title: '结构',
          text: ['共三组19件，钟体素面无纹饰，皆铸有铭文。'],
        },
        {
          title: '尺寸',
          text: ['上层三组1号钟最小，通高20.2厘米，重2.4千克。', '上层三组7号钟最大，通高39.9厘米，重11.4千克。'],
        },
      ],
    },
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'niuzhong') {
      this.setData({
        niuzhongImgIndex: null,
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 钮钟-点击图片
   */
  niuzhongGetImgIndex(e) {
    let item = e.currentTarget.dataset.item;
    this.setData({
      niuzhongImgIndex: item.id,
    });
  },
});
复制代码

zenghouyi.wxss

.niuzhong-introduce {
  color: #fff;
}
.niuzhong-introduce-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20rpx;
}
.niuzhong-introduce-item {
  width: 45%;
  display: flex;
}
.niuzhong-introduce-item {
  display: flex;
  font-size: 28rpx;
  font-weight: 300;
}
.niuzhong-introduce-title {
  width: 100rpx;
}
.niuzhong-introduce-text {
  flex: 1;
}
.niuzhong-introduce-text-item {
  margin-bottom: 20rpx;
}
.niuzhong-top {
  position: relative;
  height: 300rpx;
}
.niuzhong-top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 700rpx;
  height: 178rpx;
  z-index: 59;
}
.niuzhong-item {
  position: absolute;
  top: 60rpx;
  z-index: 99;
}
.niuzhong-item-animation {
  animation: niuzhongTwinkle 1.5s linear 0s 1 forwards;
}
@keyframes niuzhongTwinkle {
  100% {
    transform: translate(0rpx, 0rpx);
  }
  60% {
    transform: translate(-6rpx, 0rpx);
  }
  50% {
    transform: translate(6rpx, 0rpx);
  }
  42.5% {
    transform: translate(-3rpx, 0rpx);
  }
  37.5% {
    transform: translate(3rpx, 0rpx);
  }
  32.5% {
    transform: translate(0rpx, 0rpx);
  }
  0% {
    transform: translate(0rpx, 0rpx);
  }
  72.5% {
    transform: translate(0rpx, 0rpx);
  }
}
.niuzhong-item1 {
  left: 96rpx;
}
.niuzhong-item1 image {
  width: 47rpx;
  height: 72rpx;
}
.niuzhong-item2 {
  left: 142rpx;
}
.niuzhong-item2 image {
  width: 57rpx;
  height: 87rpx;
}
.niuzhong-item3 {
  left: 198rpx;
}
.niuzhong-item3 image {
  width: 64rpx;
  height: 96rpx;
}
.niuzhong-item4 {
  left: 260rpx;
}
.niuzhong-item4 image {
  width: 69rpx;
  height: 108rpx;
}
.niuzhong-item5 {
  left: 311rpx;
}
.niuzhong-item5 image {
  width: 91rpx;
  height: 115rpx;
}
.niuzhong-item6 {
  left: 405rpx;
}
.niuzhong-item6 image {
  width: 96rpx;
  height: 130rpx;
}
.niuzhong-item7 {
  left: 486rpx;
}
.niuzhong-item7 image {
  width: 103rpx;
  height: 137rpx;
}
复制代码

4.3.7 甬钟模块

UI

image.png

zenghouyi.wxml

幹、枚、鼓三个位置的交互为，点击展示详细的介绍，再次点击介绍收起。

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home yongzhong" style="display:{{ script.getDisplayVal(pageType, 'yongzhong') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="yongzhong"></image>
    <view class="home-center">
      <view class="yongzhong-nav">
        <view wx:for="{{ yongzhong.list }}" wx:key="navIndex" wx:for-item="navItem" class="yongzhong-item" style="top:{{ navItem.top + 'rpx' }};left:{{ navItem.left + 'rpx' }};">
          <view class="yongzhong-item-box" bindtap="yongzhongGetItemShow" data-item="{{ navItem }}">
            <view class="yongzhong-item-title">{{ navItem.name }}</view>
          </view>
          <view class="yongzhong-item-introduce" wx-if="{{ navItem.show }}" style="top:{{ navItem.introduceTop + 'rpx' }};left:{{ navItem.introduceLeft + 'rpx' }};width:{{ navItem.introduceWidth + 'rpx' }};">
            <view class="yongzhong-item-introduce-title">“{{ navItem.name }}”</view>
            <view class="yongzhong-item-introduce-text">{{ navItem.introduce }}</view>
          </view>
        </view>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/7%E7%94%AC%E9%92%9F%E9%A1%B5_%E7%BA%BF%E9%92%9F.png" class="yongzhong-nav-bg"></image>
      </view>
      <view class="xijie-introduce">
        <view class="xijie-introduce-title">{{ yongzhong.name }}</view>
        <view class="zouyue-introduce-size">
          <view class="zouyue-introduce-size-title">结构：</view>
          <view class="zouyue-introduce-size-text">{{ bozhong.introduce }}</view>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    yongzhong: {
      // 甬钟-对象变量
      name: '甬钟',
      introduce: '最大的钟通高153.4厘米，重253.6公斤；最小的钟通高20.2厘米，重2.4公斤。中层一组为短枚钟，共十一件；中层二组为无枚钟，共十二件；中层三组为长枚钟，共十件；下层一组三件，下层二组九件亦为长枚钟，因其形体甚大，亦称大型长枚甬钟。',
      list: [
        {
          id: 1,
          key: 'gan',
          name: '幹',
          introduce: '用于承挂钟钩，使甬钟能侧向钩挂于钟架上。',
          show: false,
          left: 206,
          top: 122,
          introduceLeft: -200,
          introduceTop: -140,
          introduceWidth: 168,
        },
        {
          id: 2,
          key: 'gu',
          name: '枚',
          introduce: '用于抑制钟声中的高频成分，调节钟声音色。',
          show: false,
          top: 228,
          left: 120,
          introduceLeft: -120,
          introduceTop: 84,
          introduceWidth: 168,
        },
        {
          id: 3,
          key: 'gu',
          name: '鼓',
          introduce: '是钟的发声部位“正鼓”底部口沿，正中央的部位。',
          show: false,
          left: 468,
          top: 416,
          introduceLeft: 40,
          introduceTop: -296,
          introduceWidth: 164,
        },
      ],
    },
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'yongzhong') {
      let yongzhong = this.data.yongzhong;
      yongzhong.list.map(item => {
        item.show = false;
      });
      this.setData({
        yongzhong: yongzhong,
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 甬钟-切换导航
   */
  yongzhongGetItemShow(e) {
    let item = e.currentTarget.dataset.item;
    let yongzhong = this.data.yongzhong;
    let list = yongzhong.list;
    let itemNew = list[item.id - 1];
    itemNew.show = !itemNew.show;
    this.setData({
      yongzhong: yongzhong,
    });
  },
});
复制代码

zenghouyi.wxss

.yongzhong-nav {
  position: relative;
  height: 700rpx;
}
.yongzhong-nav-bg {
  width: 319rpx;
  height: 569rpx;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -160rpx;
  z-index: 50;
}
.yongzhong-item {
  position: absolute;
  z-index: 99;
}
.yongzhong-item-box {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #9e1f15;
  color: #9e1f15;
  font-size: 40rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.yongzhong-item-introduce {
  color: #9e1f15;
  border: 3rpx solid #9e1f15;
  position: absolute;
  padding: 10rpx;
  font-size: 24rpx;
  line-height: 1.5;
  border-radius: 4rpx;
  animation: yongzhongTwinkle 0.5s linear 0s 1 forwards;
}
@keyframes yongzhongTwinkle {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
.yongzhong-item-introduce-title {
  font-size: 30rpx;
  line-height: 1.2;
  margin-bottom: 10rpx;
}
复制代码

4.3.8 镈钟模块

UI

image.png

zenghouyi.wxml

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home bozhong" style="display:{{ script.getDisplayVal(pageType, 'bozhong') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="bozhong"></image>
    <view class="home-center">
      <view class="zouyue-top">
        <view class="bozhong-top-img">
          <image src="{{ bozhong.src }}"></image>
        </view>
        <view class="zouyue-introduce bozhong-introduce">
          <view class="zouyue-introduce-title">{{ bozhong.name }}</view>
          <view class="zouyue-introduce-size">
            <view class="zouyue-introduce-size-title">尺寸：</view>
            <view class="zouyue-introduce-size-text">{{ bozhong.sizeText }}</view>
          </view>
          <view class="zouyue-introduce-text bozhong-introduce-text">{{ bozhong.introduce }}</view>
        </view>
      </view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    bozhong: {
      // 镈钟-对象变量
      name: '镈钟',
      sizeText: '高92.5厘米，口径60.5X46.2厘米，重134.8公斤。',
      introduce: '曾侯乙编钟的钟梁上刻有表示悬挂位置的律名，与钟体上的标音铭文相对应。与钟体铭文对照发现，这套编钟的部分钟体发生了位移，缺少了一件最大的甬钟。取代它的，是一件圆形的镈钟，乃是楚惠王赠送给曾侯乙的礼物。因曾楚两国此时关系融洽，曾国十分重视这件礼物，故将镈钟挂在全套编钟最显眼的位置，伴随曾侯乙长眠地下。',
      src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/8%E9%95%88%E9%92%9F%E9%A1%B5_%E9%8E%9B%E9%92%9F%E4%B8%BB%E4%BD%93.jpg',
    },
  },
  /**
   * 展示主页内容
   */
  getHome() {
    this.setData({
      pageType: 'home',
    });
  },
});
复制代码

zenghouyi.wxss

.bozhong-top-img {
  width: 277rpx;
  height: 462rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bozhong-top-img image {
  width: 277rpx;
  height: 462rpx;
  display: block;
}
.zouyue-introduce.bozhong-introduce {
  width: 55%;
  margin-left: 0;
}
.zouyue-introduce-text.bozhong-introduce-text {
  margin: 30rpx 0 0 80rpx;
  font-size: 24rpx;
}
复制代码

4.3.9 分享模块

UI

image.png

zenghouyi.wxml

分享的二维码为百度手机版页面，我扫进去发现和电脑的略有不同，体验的趣味性更强。

<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home fenxiang" style="display:{{ script.getDisplayVal(pageType, 'fenxiang') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="fenxiang"></image>
    <view class="home-center">
      <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%89%8B%E6%9C%BA%E7%89%88%E5%85%B3%E8%81%94%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg" class="fenxiang-img"></image>
      <view class="fenxiang-text">更多精彩请查看手机版</view>
    </view>
  </view>
  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

4.4 完美收官

zenghouyi.wxml

<!--pages/zenghouyi/zenghouyi.wxml-->
<!-- wxs展示处理-->
<wxs module="script">
  var getDisplayVal = function(pageType,type) { var val = pageType == type ? 'block' : 'none'; return val; }; module.exports.getDisplayVal = getDisplayVal;
</wxs>
<view class="container">
  <view class="home" style="display:{{ script.getDisplayVal(pageType, 'home') }}">
    <view wx:for="{{ navList }}" wx:key="navIndex" wx:for-item="navItem" class="home-item" bindtap="getItemShow" data-item="{{ navItem }}" style="top:{{ navItem.top ? navItem.top + 'px' : '' }};bottom:{{ navItem.bottom ? navItem.bottom + 'px' : '' }};left:{{ navItem.left + '%' }};">
      <view class="home-item-box">
        <view class="home-item-title" hover-class="home-item-title-curr" style="bottom:{{ navItem.id < 5 ? '32rpx' : '52rpx' }}">{{ navItem.name }}</view>
        <image src="../../images/zenghouyi/nav-bg-up.png" class="home-item-bg" wx-if="{{ navItem.id < 5 }}"></image>
        <image src="../../images/zenghouyi/nav-bg-down.png" class="home-item-bg" wx-if="{{ navItem.id > 4 }}"></image>
      </view>
    </view>
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E7%BC%96%E9%92%9F%E6%8A%A0%E5%9B%BE.jpg" class="home-main"></image>
  </view>
  <view class="home jiegou" style="display:{{ script.getDisplayVal(pageType, 'jiegou') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="jiegou"></image>
    <view class="jiegou-image">
      <view class="jiegou-image-box">
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/10%E9%92%9F%E6%9E%B6%E9%A1%B5_%E5%B0%BA%E5%AF%B8%E7%BA%BF.png" class="jiegou-image-sizeTag" wx-if="{{ jiegouFlag === 'size' }}"></image>
        <view class="jiegou-image-topHighlight" wx-if="{{ jiegouTextFlag === 'structureTop' }}"></view>
        <view class="jiegou-image-middleHighlight" wx-if="{{ jiegouTextFlag === 'structureMiddle' }}"></view>
        <view class="jiegou-image-bottomHighlight" wx-if="{{ jiegouTextFlag === 'structureBottom' }}"></view>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/10%E9%92%9F%E6%9E%B6%E9%A1%B5_%E9%95%88%E9%92%9F%E9%97%AA-%E5%9B%BE.png" class="jiegou-image-structureTwinkle" wx-if="{{ jiegouTextFlag === 'structure' || jiegouTextFlag === 'structureBottom' }}"></image>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/10%E9%92%9F%E6%9E%B6%E9%A1%B5_%E7%BC%96%E9%92%9F%E5%AE%8C%E6%95%B4.jpg" class="jiegou-image-all"></image>
      </view>
      <view class="jiegou-image-text">{{ jiegou.text[jiegouTextFlag] }}</view>
    </view>

    <view class="jiegou-structure-nav" wx-if="{{ jiegouFlag === 'structure' }}">
      <view wx:for="{{ jiegou.structureList }}" wx:key="navIndex" wx:for-item="navItem" class="jiegou-structure-item" bindtap="jiegouStructureNavChange" data-item="{{ navItem }}">
        <view class="jiegou-structure-item-box {{ navItem.key === jiegouTextFlag ? 'jiegou-structure-item-curr' : '' }}">
          <view class="jiegou-structure-nav-title">{{ navItem.name }}</view>
        </view>
      </view>
    </view>
    <view class="jiegou-nav">
      <view wx:for="{{ jiegou.list }}" wx:key="navIndex" wx:for-item="navItem" class="jiegou-item" bindtap="jiegouNavChange" data-item="{{ navItem }}">
        <view class="jiegou-item-box">
          <view class="jiegou-item-title {{ navItem.key === jiegouFlag ? 'jiegou-item-title-curr' : '' }}">{{ navItem.name }}</view>
          <image src="../../images/zenghouyi/title-bg.png" class="jiegou-item-bg"></image>
        </view>
      </view>
    </view>
  </view>

  <view class="home xijie" style="display:{{ script.getDisplayVal(pageType, 'xijie') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="xijie"></image>
    <view class="home-center">
      <view class="xijie-nav">
        <view wx:for="{{ xijie.list }}" wx:key="navIndex" wx:for-item="navItem" class="xijie-item" bindtap="xijieGetItemShow" data-item="{{ navItem }}">
          <view class="xijie-item-box {{ navItem.key === xijieFlag ? 'xijie-item-curr' : '' }}">
            <view class="xijie-item-title">{{ xijie.enum[navItem.key].name }}</view>
          </view>
        </view>
      </view>
      <view class="xijie-content">
        <view class="xijie-content-img">
          <image src="{{ xijieItem.src }}"></image>
        </view>
        <view class="xijie-introduce">
          <view class="xijie-introduce-title">{{ xijieItem.name }}</view>
          <view class="xijie-introduce-text">{{ xijieItem.introduce }}</view>
        </view>
      </view>
    </view>
  </view>

  <view class="home yiwen" style="display:{{ script.getDisplayVal(pageType, 'yiwen') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="yiwen"></image>
    <view class="home-center">
      <view class="yiwen-top">
        <view class="yiwen-top-box {{ yiwenFlag === 'old' ? 'yiwen-top-curr-old' : 'yiwen-top-curr-new' }}" bindtap="yiwenChange">
          <image src="{{ yiwen.old }}" class="yiwen-top-img yiwen-top-old"></image>
          <image src="{{ yiwen.new }}" class="yiwen-top-img yiwen-top-new"></image>
        </view>
        <view class="yiwen-top-text">
          {{ yiwen.text }}
        </view>
      </view>
      <view class="yiwen-introduce">
        <view class="xijie-introduce-title">{{ yiwen.name }}</view>
        <view class="yiwen-introduce-text">
          <view wx:for="{{ yiwen.introduce }}" wx:key="navIndex" wx:for-item="navTextItem" class="yiwen-introduce-item">
            {{ navTextItem }}
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="home zouyue" style="display:{{ script.getDisplayVal(pageType, 'zouyue') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="zouyue"></image>
    <view class="home-center">
      <view class="zouyue-top">
        <view class="zouyue-top-img">
          <image src="{{ zouyueItem.src }}"></image>
        </view>
        <view class="zouyue-introduce">
          <view class="zouyue-introduce-title">{{ zouyue.name }}</view>
          <view class="zouyue-introduce-text">{{ zouyue.introduce }}</view>
        </view>
      </view>
      <view class="zouyue-video">
        <video controls="true" id="video" src="{{ zouyueItem.video }}" bindplay="onVideoPlay" object-fit="cover" poster="{{ zouyueItem.src }}"></video>
      </view>
      <view class="zouyue-nav">
        <view wx:for="{{ zouyue.list }}" wx:key="navIndex" wx:for-item="navItem" class="zouyue-item" bindtap="zouyueGetItemShow" data-item="{{ navItem }}">
          <view class="zouyue-item-box {{ navItem.key === zouyueFlag ? 'zouyue-item-curr' : '' }}">
            <view class="zouyue-item-title">{{ zouyue.enum[navItem.key].name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="home niuzhong" style="display:{{ script.getDisplayVal(pageType, 'niuzhong') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="niuzhong"></image>
    <view class="home-center">
      <view class="niuzhong-top">
        <view wx:for="{{ niuzhong.list }}" wx:key="navIndex" wx:for-item="navItem" class="niuzhong-item {{ navItem.className }} {{ niuzhongImgIndex === navItem.id ? 'niuzhong-item-animation' : '' }}" bindtap="niuzhongGetImgIndex" data-item="{{ navItem }}">
          <image src="{{ navItem.src }}"></image>
        </view>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_%E9%92%9F%E6%9E%B6.png" class="niuzhong-top-bg"></image>
      </view>
      <view class="niuzhong-introduce">
        <view class="zouyue-introduce-title">{{ niuzhong.name }}</view>
        <view class="niuzhong-introduce-box">
          <view wx:for="{{ niuzhong.introduce }}" wx:key="navIndex" wx:for-item="navItem" class="niuzhong-introduce-item">
            <view class="niuzhong-introduce-title">{{ navItem.title }}：</view>
            <view class="niuzhong-introduce-text">
              <view wx:for="{{ navItem.text }}" wx:key="navIndex" wx:for-item="navTextItem" class="niuzhong-introduce-text-item">
                {{ navTextItem }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="home yongzhong" style="display:{{ script.getDisplayVal(pageType, 'yongzhong') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="yongzhong"></image>
    <view class="home-center">
      <view class="yongzhong-nav">
        <view wx:for="{{ yongzhong.list }}" wx:key="navIndex" wx:for-item="navItem" class="yongzhong-item" style="top:{{ navItem.top + 'rpx' }};left:{{ navItem.left + 'rpx' }};">
          <view class="yongzhong-item-box" bindtap="yongzhongGetItemShow" data-item="{{ navItem }}">
            <view class="yongzhong-item-title">{{ navItem.name }}</view>
          </view>
          <view class="yongzhong-item-introduce" wx-if="{{ navItem.show }}" style="top:{{ navItem.introduceTop + 'rpx' }};left:{{ navItem.introduceLeft + 'rpx' }};width:{{ navItem.introduceWidth + 'rpx' }};">
            <view class="yongzhong-item-introduce-title">“{{ navItem.name }}”</view>
            <view class="yongzhong-item-introduce-text">{{ navItem.introduce }}</view>
          </view>
        </view>
        <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/7%E7%94%AC%E9%92%9F%E9%A1%B5_%E7%BA%BF%E9%92%9F.png" class="yongzhong-nav-bg"></image>
      </view>
      <view class="xijie-introduce">
        <view class="xijie-introduce-title">{{ yongzhong.name }}</view>
        <view class="zouyue-introduce-size">
          <view class="zouyue-introduce-size-title">结构：</view>
          <view class="zouyue-introduce-size-text">{{ bozhong.introduce }}</view>
        </view>
      </view>
    </view>
  </view>

  <view class="home bozhong" style="display:{{ script.getDisplayVal(pageType, 'bozhong') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="bozhong"></image>
    <view class="home-center">
      <view class="zouyue-top">
        <view class="bozhong-top-img">
          <image src="{{ bozhong.src }}"></image>
        </view>
        <view class="zouyue-introduce bozhong-introduce">
          <view class="zouyue-introduce-title">{{ bozhong.name }}</view>
          <view class="zouyue-introduce-size">
            <view class="zouyue-introduce-size-title">尺寸：</view>
            <view class="zouyue-introduce-size-text">{{ bozhong.sizeText }}</view>
          </view>
          <view class="zouyue-introduce-text bozhong-introduce-text">{{ bozhong.introduce }}</view>
        </view>
      </view>
    </view>
  </view>

  <view class="home fenxiang" style="display:{{ script.getDisplayVal(pageType, 'fenxiang') }}">
    <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE.png" class="home-close" bindtap="getHome" data-key="fenxiang"></image>
    <view class="home-center">
      <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%89%8B%E6%9C%BA%E7%89%88%E5%85%B3%E8%81%94%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg" class="fenxiang-img"></image>
      <view class="fenxiang-text">更多精彩请查看手机版</view>
    </view>
  </view>

  <image src="https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/1%E5%AF%BC%E8%88%AA%E9%A1%B5_%E5%BA%95%E7%BA%B9.jpg" class="container-bg"></image>
</view>
复制代码

zenghouyi.js

// pages/zenghouyi/zenghouyi.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    pageType: 'home', // 页面type值 区分展示模块
    navList: [
      // 主模块-导航列表
      {
        id: 1,
        name: '结构',
        top: 10,
        left: 5,
        key: 'jiegou',
      },
      {
        id: 2,
        name: '细节',
        top: 10,
        left: 30,
        key: 'xijie',
      },
      {
        id: 3,
        name: '译文',
        top: 10,
        left: 55,
        key: 'yiwen',
      },
      {
        id: 4,
        name: '奏乐',
        top: 10,
        left: 80,
        key: 'zouyue',
      },
      {
        id: 5,
        name: '钮钟',
        bottom: 10,
        left: 5,
        key: 'niuzhong',
      },
      {
        id: 6,
        name: '甬钟',
        bottom: 10,
        left: 30,
        key: 'yongzhong',
      },
      {
        id: 7,
        name: '镈钟',
        bottom: 10,
        left: 55,
        key: 'bozhong',
      },
      {
        id: 8,
        name: '分享',
        bottom: 10,
        left: 80,
        key: 'fenxiang',
      },
    ], // 主模块-导航数组
    jiegouFlag: 'size', // 结构-展示内容的flag值
    jiegouTextFlag: 'size', // 结构-结构分类-展示内容的flag值
    jiegou: {
      // 结构-数据对象
      flag: 'size',
      list: [
        {
          key: 'size',
          name: '尺 寸',
        },
        {
          key: 'structure',
          name: '结 构',
        },
      ],
      structureList: [
        {
          key: 'structureTop',
          name: '上 层',
        },
        {
          key: 'structureMiddle',
          name: '中 层',
        },
        {
          key: 'structureBottom',
          name: '下 层',
        },
      ],
      text: {
        size: '曾侯乙编钟，长7.48米，宽3.35米，高2.73米。重2567公斤。',
        structure: '钟架分三层八组悬挂着65件青铜钟。',
        structureTop: '上层分三组钮钟，19件。',
        structureMiddle: '中层分三组甬钟，33件。',
        structureBottom: '下层为两组大型长枚甬钟，12件。下层正中悬挂的是楚惠王送给曾侯乙的意见镈钟。',
      },
    },
    xijieFlag: 'bymw', // 细节-展示内容的flag值
    xijie: {
      // 细节-数据对象
      list: [
        {
          key: 'bymw',
        },
        {
          key: 'jsmw',
        },
        {
          key: 'zj',
        },
        {
          key: 'pj',
        },
      ],
      enum: {
        bymw: {
          name: '标音铭文',
          introduce: '钟架、钟钩、钟体上共有铭文3755字，内容为编号、记事、标音和乐律理论、铭文多数错金。标音铭文标示了钟的悬挂位置或敲击部位及其所发音的名称。',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%A0%87%E9%9F%B3%E5%9B%BE1.jpg',
        },
        jsmw: {
          name: '记事铭文',
          introduce: '全部甬钟的记事铭文均有 “曾侯乙作持”5字，标明钟的制作和享用者是曾侯乙。曾侯乙，姓姬名乙。“曾”是国名，“侯”是爵位，“乙”是名字，“曾侯乙”即战国时期曾国一位名叫“乙”的君主。',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E8%AE%B0%E4%BA%8B%E5%9B%BE1.jpg',
        },
        zj: {
          name: '钟架',
          introduce: '由六个青铜佩剑',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E9%92%9F%E6%9E%B6%E5%9B%BE1.jpg',
        },
        pj: {
          name: '配件',
          introduce: '钟架、钟钩、钟体上共有铭文3755字，内容为编号、记事、标音和乐律理论、铭文多数错金。标音铭文标示了钟的悬挂位置或敲击部位及其所发音的名称。',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E9%85%8D%E4%BB%B6%E5%9B%BE1.jpg',
        },
      },
    },
    xijieItem: {}, // 细节-当前选中的对象变量
    yiwenFlag: 'old',
    yiwen: {
      text: '点击铭文图片查看古文对照',
      // 译文-对象变量
      old: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/8%E9%95%88%E9%92%9F%E9%A1%B5_%E9%93%AD%E6%96%87%E6%94%BE%E5%A4%A7%E5%9B%BE-%E9%93%AD.jpg',
      new: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/8%E9%95%88%E9%92%9F%E9%A1%B5_%E9%93%AD%E6%96%87%E6%94%BE%E5%A4%A7%E5%9B%BE-%E8%AF%91.jpg',
      name: '现代译文',
      introduce: ['这篇铭文告诉我们，这件镈钟是楚惠王熊章为曾侯乙制作的一套宗庙祭器之一，放置在西阳，其铭文纪年为楚惠王五十六年，即公元前433年。', '也有学者认为，古书中“返”与“报”两字常互相代用，“报”即报丧的意思。铭文中的“返自西阳”应解释为从西阳得到曾侯乙去世的消息后，楚惠王为曾侯乙制作了镈钟这件祭器。'],
    },
    zouyueFlag: 'cs', // 奏乐-展示内容的flag值
    zouyue: {
      // 奏乐-对象变量
      name: '奏乐',
      introduce: '编钟音域宽广，跨越五个半八度，只比现代钢琴少一个八度，中心音域12个半音齐全。',
      list: [
        {
          key: 'cs',
        },
        {
          key: 'gs',
        },
        {
          key: 'cjhyy',
        },
        {
          key: 'dfg',
        },
      ],
      enum: {
        cs: {
          name: '楚商',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%A5%9A%E5%95%86.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%A5%9A%E5%95%86%E7%89%87%E6%AE%B5.mp3',
        },
        gs: {
          name: '国殇',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%9B%BD%E6%AE%87.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E5%9B%BD%E6%AE%87%E7%89%87%E6%AE%B5.mp3',
        },
        cjhyy: {
          name: '春江花月夜',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%98%A5%E6%B1%9F.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E6%98%A5%E6%B1%9F%E8%8A%B1%E6%9C%88%E5%A4%9C%E7%89%87%E6%AE%B5.mp3',
        },
        dfg: {
          name: '东方红',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E4%B8%9C%E6%96%B9.jpg',
          video: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/%E4%B8%9C%E6%96%B9%E7%BA%A2.mp3',
        },
      },
    },
    zouyueItem: {}, // 奏乐-当前选中的对象变量
    niuzhongImgIndex: null,
    niuzhong: {
      // 钮钟-对象变量
      name: '钮钟',
      list: [
        {
          id: 0,
          className: 'niuzhong-item1',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_1.png',
        },
        {
          id: 1,
          className: 'niuzhong-item2',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_2.png',
        },
        {
          id: 2,
          className: 'niuzhong-item3',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_3.png',
        },
        {
          id: 3,
          className: 'niuzhong-item4',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_4.png',
        },
        {
          id: 4,
          className: 'niuzhong-item5',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_5.png',
        },
        {
          id: 5,
          className: 'niuzhong-item6',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_6.png',
        },
        {
          id: 6,
          className: 'niuzhong-item7',
          src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/3%E9%92%AE%E9%92%9F%E9%A1%B5_7.png',
        },
      ],
      introduce: [
        {
          title: '结构',
          text: ['共三组19件，钟体素面无纹饰，皆铸有铭文。'],
        },
        {
          title: '尺寸',
          text: ['上层三组1号钟最小，通高20.2厘米，重2.4千克。', '上层三组7号钟最大，通高39.9厘米，重11.4千克。'],
        },
      ],
    },
    bozhong: {
      // 镈钟-对象变量
      name: '镈钟',
      sizeText: '高92.5厘米，口径60.5X46.2厘米，重134.8公斤。',
      introduce: '曾侯乙编钟的钟梁上刻有表示悬挂位置的律名，与钟体上的标音铭文相对应。与钟体铭文对照发现，这套编钟的部分钟体发生了位移，缺少了一件最大的甬钟。取代它的，是一件圆形的镈钟，乃是楚惠王赠送给曾侯乙的礼物。因曾楚两国此时关系融洽，曾国十分重视这件礼物，故将镈钟挂在全套编钟最显眼的位置，伴随曾侯乙长眠地下。',
      src: 'https://baikebcs.bdimg.com/baike-other/digital_museum/zenghouyi/resources/8%E9%95%88%E9%92%9F%E9%A1%B5_%E9%8E%9B%E9%92%9F%E4%B8%BB%E4%BD%93.jpg',
    },
    yongzhong: {
      // 甬钟-对象变量
      name: '甬钟',
      introduce: '最大的钟通高153.4厘米，重253.6公斤；最小的钟通高20.2厘米，重2.4公斤。中层一组为短枚钟，共十一件；中层二组为无枚钟，共十二件；中层三组为长枚钟，共十件；下层一组三件，下层二组九件亦为长枚钟，因其形体甚大，亦称大型长枚甬钟。',
      list: [
        {
          id: 1,
          key: 'gan',
          name: '幹',
          introduce: '用于承挂钟钩，使甬钟能侧向钩挂于钟架上。',
          show: false,
          left: 206,
          top: 122,
          introduceLeft: -200,
          introduceTop: -140,
          introduceWidth: 168,
        },
        {
          id: 2,
          key: 'gu',
          name: '枚',
          introduce: '用于抑制钟声中的高频成分，调节钟声音色。',
          show: false,
          top: 228,
          left: 120,
          introduceLeft: -120,
          introduceTop: 84,
          introduceWidth: 168,
        },
        {
          id: 3,
          key: 'gu',
          name: '鼓',
          introduce: '是钟的发声部位“正鼓”底部口沿，正中央的部位。',
          show: false,
          left: 468,
          top: 416,
          introduceLeft: 40,
          introduceTop: -296,
          introduceWidth: 164,
        },
      ],
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  /**
   * 导航点击事件-切换当前需要展示的模块内容
   */
  getItemShow(e) {
    let item = e.currentTarget.dataset.item;
    // =>true: 设置细节当前展示的item项
    if (item.key === 'xijie') {
      let { xijie, xijieFlag } = this.data;
      this.setData({
        xijieItem: xijie.enum[xijieFlag],
      });
    } else if (item.key === 'zouyue') {
      // =>true: 设置奏乐当前展示的item项
      let { zouyue, zouyueFlag } = this.data;
      this.setData({
        zouyueItem: zouyue.enum[zouyueFlag],
      });
    }
    this.setData({
      pageType: item.key,
    });
  },
  /**
   * 展示主页内容
   */
  getHome(e) {
    let key = e.currentTarget.dataset.key;
    // 重置变量值
    if (key === 'jiegou') {
      this.setData({
        jiegouFlag: 'size',
        jiegouTextFlag: 'size',
      });
    } else if (key === 'xijie') {
      this.setData({
        xijieItem: {},
        xijieFlag: 'bymw',
      });
    } else if (key === 'zouyue') {
      let { zouyue } = this.data;
      let zouyueFlag = 'cs';
      this.setData({
        zouyueItem: zouyue.enum[zouyueFlag],
        zouyueFlag: 'cs',
      });
    } else if (key === 'yongzhong') {
      let yongzhong = this.data.yongzhong;
      yongzhong.list.map(item => {
        item.show = false;
      });
      this.setData({
        yongzhong: yongzhong,
      });
    } else if (key === 'niuzhong') {
      this.setData({
        niuzhongImgIndex: null,
      });
    } else if (key === 'yewei') {
      this.setData({
        yeweiFlag: 'old',
      });
    }
    this.setData({
      pageType: 'home',
    });
  },
  /**
   * 结构-切换底部导航
   */
  jiegouNavChange(e) {
    let item = e.currentTarget.dataset.item;
    let jiegouFlag = item.key;
    let jiegouTextFlag = item.key;
    this.setData({
      jiegouFlag: jiegouFlag,
      jiegouTextFlag: jiegouTextFlag,
    });
  },
  /**
   * 结构-结构-切换导航
   */
  jiegouStructureNavChange(e) {
    let item = e.currentTarget.dataset.item;
    let jiegouTextFlag = item.key;
    this.setData({
      jiegouTextFlag: jiegouTextFlag,
    });
  },
  /**
   * 细节-切换导航
   */
  xijieGetItemShow(e) {
    let item = e.currentTarget.dataset.item;
    let xijie = this.data.xijie;
    this.setData({
      xijieFlag: item.key,
      xijieItem: xijie.enum[item.key],
    });
  },
  /**
   * 奏乐-切换导航
   */
  zouyueGetItemShow(e) {
    let item = e.currentTarget.dataset.item;
    let zouyue = this.data.zouyue;
    this.setData({
      zouyueFlag: item.key,
      zouyueItem: zouyue.enum[item.key],
    });
  },
  /**
   * 奏乐-播放
   */
  onVideoPlay() {
    //播放
    disabled.ispay = true;
  },
  /**
   * 甬钟-切换导航
   */
  yongzhongGetItemShow(e) {
    let item = e.currentTarget.dataset.item;
    let yongzhong = this.data.yongzhong;
    let list = yongzhong.list;
    let itemNew = list[item.id - 1];
    itemNew.show = !itemNew.show;
    this.setData({
      yongzhong: yongzhong,
    });
  },
  /**
   * 钮钟-点击图片
   */
  niuzhongGetImgIndex(e) {
    let item = e.currentTarget.dataset.item;
    this.setData({
      niuzhongImgIndex: item.id,
    });
  },
  /**
   * 译文-按钮点击
   */
  yiwenChange() {
    let yiwenFlag = this.data.yiwenFlag;
    yiwenFlag = yiwenFlag === 'new' ? 'old' : 'new';
    this.setData({
      yiwenFlag: yiwenFlag,
    });
  },
});
复制代码

zenghouyi.wxss

/* pages/zenghouyi/zenghouyi.wxss */
.container {
  height: 100vh;
  background: rgb(58, 58, 58);
  padding-top: 40rpx;
  position: relative;
}
.container-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 10;
}
.home {
  width: 100%;
  height: 800rpx;
  position: relative;
  z-index: 99;
  animation: homeTwinkle 0.5s linear 0s 1 forwards;
}
@keyframes homeTwinkle {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
.home-center {
  margin: 0 30rpx;
  padding-top: 80rpx;
  height: 100%;
  position: relative;
}
.home-close {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 999;
}
.home-item {
  position: absolute;
  width: 76rpx;
  height: 175rpx;
}
.home-item-box {
  position: relative;
}
.home-item-title {
  position: absolute;
  left: 0;
  color: #fff;
  font-size: 32rpx;
  writing-mode: vertical-lr;
  line-height: 76rpx;
  letter-spacing: 18rpx;
  font-weight: 600;
}
.home-item-title-curr {
  color: #e9d27b;
}
.home-item-bg {
  width: 76rpx;
  height: 175rpx;
}
.home-main {
  width: 100%;
  height: 288rpx;
  margin-top: 260rpx;
}
.jiegou {
  padding-top: 30rpx;
}
.jiegou-image {
  width: 100%;
  height: 480rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.jiegou-image-text {
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  margin-top: 10rpx;
  font-weight: 300;
  position: absolute;
  bottom: 20rpx;
  z-index: 999;
  width: 100%;
}
.jiegou-image-box {
  width: 100%;
  height: 380rpx;
  position: relative;
}
.jiegou-image-sizeTag {
  width: 730rpx;
  height: 320rpx;
  display: block;
  position: absolute;
  top: 0;
  left: 10rpx;
  z-index: 30;
}
.jiegou-image-topHighlight {
  width: 494rpx;
  height: 46rpx;
  display: block;
  position: absolute;
  top: 69rpx;
  left: 97rpx;
  z-index: 50;
  box-shadow: 0 0 0 195rpx rgb(0, 0, 0, 0.6);
}
.jiegou-image-middleHighlight {
  width: 539rpx;
  height: 50rpx;
  display: block;
  position: absolute;
  top: 118rpx;
  left: 94rpx;
  z-index: 50;
  box-shadow: 0 0 0 150rpx rgb(0, 0, 0, 0.6);
}
.jiegou-image-bottomHighlight {
  width: 509rpx;
  height: 73rpx;
  display: block;
  position: absolute;
  top: 199rpx;
  left: 102rpx;
  z-index: 50;
  box-shadow: 0 0 0 135rpx rgb(0, 0, 0, 0.6);
}
.jiegou-image-structureTwinkle {
  width: 45rpx;
  height: 67rpx;
  display: block;
  position: absolute;
  bottom: 115rpx;
  left: 362rpx;
  z-index: 50;
  animation: structureTwinkle 1s linear 0s infinite forwards;
}
@keyframes structureTwinkle {
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
}
.jiegou-image-all {
  position: absolute;
  top: 10rpx;
  left: 20rpx;
  width: 700rpx;
  height: 300rpx;
  z-index: 20;
}

.jiegou-nav {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 140rpx;
}
.jiegou-item {
  width: 154rpx;
  height: 88rpx;
}
.jiegou-item-bg {
  width: 154rpx;
  height: 88rpx;
}
.jiegou-item-box {
  width: 154rpx;
  height: 88rpx;
  position: relative;
}
.jiegou-item-title {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -40rpx;
  margin-top: -22rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  width: 80rpx;
  height: 44rpx;
}
.jiegou-item-title-curr {
  color: #e9d27b;
  font-size: 300;
}
.jiegou-structure-nav {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 155rpx;
}
.jiegou-structure-item-box {
  border: 2px solid #56080a;
  height: 40rpx;
  width: 120rpx;
  margin-bottom: 8rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jiegou-structure-item-curr {
  border-color: #920000;
}
.jiegou-structure-nav-title {
  width: 110rpx;
  height: 30rpx;
  background: #56080a;
  color: #fff;
  font-size: 20rpx;
}
.jiegou-structure-item-curr .jiegou-structure-nav-title {
  background: #920000;
}

.xijie-nav {
  position: absolute;
  top: 80rpx;
  left: 0;
  z-index: 99;
  height: 380rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.xijie-item-box {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #851a11;
  background: #211211;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xijie-item-title {
  width: 60rpx;
  height: 60rpx;
  padding: 2rpx;
  border: 2rpx solid #811911;
  background: #430906;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xijie-item-curr .xijie-item-title {
  color: #ebd273;
}
.xijie-content {
  position: absolute;
  top: 80rpx;
  left: 0;
  z-index: 59;
  width: 100%;
}
.xijie-content-img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 366rpx;
  margin-bottom: 60rpx;
}
.xijie-content-img image {
  width: 560rpx;
  height: 360rpx;
  border: 4rpx solid #fff;
}
.xijie-introduce {
  width: 100%;
  color: #fff;
}
.xijie-introduce-title {
  height: 60rpx;
  border-bottom: 1px solid #fff;
  text-align: left;
  font-size: 32rpx;
  padding-left: 30rpx;
}

.xijie-introduce-text {
  width: 80%;
  margin: 0 auto;
  font-size: 28rpx;
  line-height: 1.5;
  margin-top: 30rpx;
  font-weight: 300;
}

.zouyue-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}
.zouyue-top-img {
  width: 347rpx;
  border: 2rpx solid #851a11;
  background: #211211;
  height: 324rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zouyue-top-img image {
  width: 317rpx;
  height: 294rpx;
  display: block;
}
.zouyue-introduce {
  width: 48%;
  color: #fff;
  margin-left: 20rpx;
}
.zouyue-introduce-title {
  height: 60rpx;
  border-bottom: 1px solid #fff;
  text-align: left;
  font-size: 32rpx;
  padding-left: 30rpx;
}

.zouyue-introduce-text {
  width: 80%;
  margin: 30rpx auto 0;
  font-size: 28rpx;
  color: #fff;
  line-height: 1.5;
  font-weight: 300;
}
.zouyue-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.zouyue-item-box {
  width: 140rpx;
  height: 70rpx;
  border: 2rpx solid #851a11;
  background: #211211;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zouyue-item-title {
  width: 120rpx;
  height: 50rpx;
  padding: 2rpx;
  border: 2rpx solid #811911;
  background: #430906;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zouyue-item-curr .zouyue-item-title {
  color: #ebd273;
}
.zouyue-video video {
  width: 700rpx;
  height: 300rpx;
  margin: 0 auto;
}
.bozhong-top-img {
  width: 277rpx;
  height: 462rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bozhong-top-img image {
  width: 277rpx;
  height: 462rpx;
  display: block;
}
.zouyue-introduce.bozhong-introduce {
  width: 55%;
  margin-left: 0;
}
.zouyue-introduce-size {
  font-size: 24rpx;
  font-weight: 300;
  display: flex;
  margin-top: 40rpx;
}
.zouyue-introduce-size-title {
  width: 80rpx;
}
.zouyue-introduce-size-text {
  flex: 1;
}
.zouyue-introduce-text.bozhong-introduce-text {
  margin: 30rpx 0 0 80rpx;
  font-size: 24rpx;
}
.yongzhong-nav {
  position: relative;
  height: 700rpx;
}
.yongzhong-nav-bg {
  width: 319rpx;
  height: 569rpx;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -160rpx;
  z-index: 50;
}
.yongzhong-item {
  position: absolute;
  z-index: 99;
}
.yongzhong-item-box {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #9e1f15;
  color: #9e1f15;
  font-size: 40rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.yongzhong-item-introduce {
  color: #9e1f15;
  border: 3rpx solid #9e1f15;
  position: absolute;
  padding: 10rpx;
  font-size: 24rpx;
  line-height: 1.5;
  border-radius: 4rpx;
  animation: yongzhongTwinkle 0.5s linear 0s 1 forwards;
}
@keyframes yongzhongTwinkle {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
.yongzhong-item-introduce-title {
  font-size: 30rpx;
  line-height: 1.2;
  margin-bottom: 10rpx;
}
.fenxiang-img {
  width: 280rpx;
  height: 280rpx;
  margin: 40rpx auto;
  display: block;
}
.fenxiang-text {
  font-size: 36rpx;
  color: #fff;
  line-height: 1.5;
  text-align: center;
}
.niuzhong-introduce {
  color: #fff;
}
.niuzhong-introduce-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20rpx;
}
.niuzhong-introduce-item {
  width: 45%;
  display: flex;
}
.niuzhong-introduce-item {
  display: flex;
  font-size: 28rpx;
  font-weight: 300;
}
.niuzhong-introduce-title {
  width: 100rpx;
}
.niuzhong-introduce-text {
  flex: 1;
}
.niuzhong-introduce-text-item {
  margin-bottom: 20rpx;
}
.niuzhong-top {
  position: relative;
  height: 300rpx;
}
.niuzhong-top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 700rpx;
  height: 178rpx;
  z-index: 59;
}
.niuzhong-item {
  position: absolute;
  top: 60rpx;
  z-index: 99;
}
.niuzhong-item-animation {
  animation: niuzhongTwinkle 1.5s linear 0s 1 forwards;
}
@keyframes niuzhongTwinkle {
  100% {
    transform: translate(0rpx, 0rpx);
  }
  60% {
    transform: translate(-6rpx, 0rpx);
  }
  50% {
    transform: translate(6rpx, 0rpx);
  }
  42.5% {
    transform: translate(-3rpx, 0rpx);
  }
  37.5% {
    transform: translate(3rpx, 0rpx);
  }
  32.5% {
    transform: translate(0rpx, 0rpx);
  }
  0% {
    transform: translate(0rpx, 0rpx);
  }
  72.5% {
    transform: translate(0rpx, 0rpx);
  }
}
.niuzhong-item1 {
  left: 96rpx;
}
.niuzhong-item1 image {
  width: 47rpx;
  height: 72rpx;
}
.niuzhong-item2 {
  left: 142rpx;
}
.niuzhong-item2 image {
  width: 57rpx;
  height: 87rpx;
}
.niuzhong-item3 {
  left: 198rpx;
}
.niuzhong-item3 image {
  width: 64rpx;
  height: 96rpx;
}
.niuzhong-item4 {
  left: 260rpx;
}
.niuzhong-item4 image {
  width: 69rpx;
  height: 108rpx;
}
.niuzhong-item5 {
  left: 311rpx;
}
.niuzhong-item5 image {
  width: 91rpx;
  height: 115rpx;
}
.niuzhong-item6 {
  left: 405rpx;
}
.niuzhong-item6 image {
  width: 96rpx;
  height: 130rpx;
}
.niuzhong-item7 {
  left: 486rpx;
}
.niuzhong-item7 image {
  width: 103rpx;
  height: 137rpx;
}
.yiwen-top {
  height: 529rpx;
  display: flex;
  align-items: center;
  padding-left: 200rpx;
}
.yiwen-top-box {
  position: relative;
  width: 288rpx;
  height: 529rpx;
  transition: transform 1s;
  transform-style: preserve-3d;
}
.yiwen-top-curr-old {
  transform: rotateY(0);
}
.yiwen-top-curr-new {
  transform: rotateY(180deg);
}
.yiwen-top-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 288rpx;
  height: 529rpx;
  z-index: 99;
  backface-visibility: hidden;
}
.yiwen-top-new {
  transform: rotateY(180deg);
}
.yiwen-introduce {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 24rpx;
}
.yiwen-top-text {
  width: 50rpx;
  background: #211211;
  color: #fff;
  margin-left: 30rpx;
  font-size: 28rpx;
}
.yiwen-introduce-text {
  margin-top: 30rpx;
  font-weight: 300;
  font-size: 24rpx;
}
复制代码

五、总结

小程序git地址：https://github.com/wxmp-project/wxmp-travel

提前祝大家新的一年： 全塘去冰，星河长明 三餐四季，喜乐安宁 笑容坦荡，皱纹全平 干吃不胖，袅袅婷婷 考试都过，拼搏全赢 眼中有光，福至心灵 事事顺意，天天有个好心情

猜你喜欢

转载自juejin.im/post/7054134142643994655
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022