library-wechat/subpkg/pages/register/register.vue

<template>
  <view class="page-container">
    <!-- 顶部背景 + 标题 -->
    <view class="top-bar">
      <image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image>
      <view class="library-info">
        <image class="avatar" src="@/static/images/logo.jpg" mode="aspectFill"></image>
        <view class="library-name">葛店经济技术开发区图书馆</view>
        <view class="sub-title">信用免押金办证流程</view>
      </view>
    </view>

    <view class="online-card">
       <view class="online-item">
          <text>支付宝扫码进入借阅宝生活号</text>
          <image src="/subpkg/static/register/1.jpg" mode="widthFix" />
       </view>
       <view class="online-item">
          <text>进入“服务”点击“图书馆”</text>
          <image src="/subpkg/static/register/2.jpg" mode="widthFix" />
       </view>
       <view class="online-item">
          <text>点击“切换”进入“葛店经济技术开发区图书馆”</text>
          <text>然后点击“暂无借阅证，点击注册”</text>
          <image src="/subpkg/static/register/3.jpg" mode="widthFix" />
       </view>
       <view class="online-item">
          <text>进入我馆办证界面设置密码</text>
          <image src="/subpkg/static/register/4.jpg" mode="widthFix" />
       </view>
       <view class="online-item">
          <text>点击“去授权”</text>
          <image src="/subpkg/static/register/5.jpg" mode="widthFix" />
       </view>
       <view class="online-item">
          <text>“下一步”然后点击“同意协议”</text>
          <image src="/subpkg/static/register/6.jpg" mode="widthFix" />
       </view>
       <view class="online-item">
          <text>注册成功后点击“前往服务大厅”</text>
          <text>借阅证即成功办理</text>
          <image src="/subpkg/static/register/7.jpg" mode="widthFix" />
       </view>
    </view>

    <view class="tips-card">
      <view class="tips-title">借阅宝注册成功即可凭<text style="padding: 0 8px; color: #007AFF;">电子证</text>借阅图书</view>
      <view class="tips-text">
        若需换取实体读者证，需持本人身份证原件前往二楼总服务办理
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {      
    };
  },
  onLoad() {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f7fa;
}
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 20px;
}

/* 顶部 */
.top-bar {
  height: 210px;
  .library-info {
    position: relative;
    z-index: 2;
    color: #fff;
  }
}

.online-card {
  margin: -30px 12px 12px;
  position: relative;
  z-index: 3;
  .online-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text{
      font-size: 14px;
      font-weight: bold;
      color: #000;
      margin-bottom: 10px;
    }
  }
  image {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    // box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

/* 温馨提示 */
.tips-card {
  margin: 0 12px;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  
  .tips-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }
  
  .tips-text {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
  }
}
</style>