小叶的前端笔记

Appearance

描述

一.项目介绍、样式布局 ​

代码仓库地址：https://github.com/Topeceen/wallpaper ​

1.banner 样式 ​

js
<view class="banner">
  <swiper
    circular
    indicator-dots
    indicator-color="rgba(255,255,255,0.5)"
    indicator-active-color="#fff"
    autoplay
  >
    <swiper-item>
      <image src="../../common/images/banner1.jpg" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</view>
css
.banner {
  width: 750rpx;
  padding: 30rpx 0;
  swiper {
    width: 750rpx;
    height: 340rpx;
    &-item {
      width: 100%;
      height: 100%;
      padding: 0 30rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}

2.公告样式 ​

js
<view class="notice">
  <view class="left">
    <uni-icons type="sound-filled" size="20"></uni-icons>
    <text class="text">公告</text>
  </view>
  <view class="center">
    <swiper vertical autoplay interval="1500" duration="300" circular>
      <swiper-item v-for="item in 4">
        <navigator url="/pages/notice/detail">
          文字内容文字内容文字内容文字内容文字内容文字内容
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <view class="right">
    <uni-icons type="right" size="16" color="#333"></uni-icons>
  </view>
</view>
css
.notice {
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #f9f9f9;
  margin: 0 auto;
  border-radius: 80rpx;
  display: flex;
  .left {
    width: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    :deep() {
      .uni-icons {
        color: $brand-theme-color !important;
      }
    }
    .text {
      color: $brand-theme-color;
      font-weight: 600;
      font-size: 28rpx;
    }
  }
  .center {
    flex: 1;
    swiper {
      height: 100%;
      &-item {
        height: 100%;
        font-size: 30rpx;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .right {
    width: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

3.随机区域样式 ​

js
<view class="select">
    <common-title>
        <template #name>每日推荐</template>
        <template #custom>
            <view class="date">
                <uni-icons type="calendar" size="18"></uni-icons>
                <view class="text">
                    <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
                </view>
            </view>
        </template>
    </common-title>
    <view class="content">
        <scroll-view scroll-x>
            <view class="box" v-for="item in 8" @click="goPreview">
                <image src="../../common/images/preview_small.webp" mode="aspectFill"></image>
            </view>
        </scroll-view>
    </view>
</view>
css
.select {
  padding-top: 50rpx;
  .date {
    color: $brand-theme-color;
    display: flex;
    align-items: center;
    :deep() {
      .uni-icons {
        color: $brand-theme-color !important;
      }
    }
    .text {
      margin-left: 5rpx;
    }
  }
  .content {
    width: 720rpx;
    margin-left: 30rpx;
    margin-top: 30rpx;
    scroll-view {
      white-space: nowrap;
      .box {
        width: 200rpx;
        height: 430rpx;
        display: inline-block;
        margin-right: 15rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .box:last-child {
        margin-right: 30rpx;
      }
    }
  }
}

4.主题区域样式 ​

js
<view class="theme">
    <common-title>
        <template #name>专题精选</template>
        <template #custom>
            <navigator url="" class="more">More+</navigator>
        </template>
    </common-title>

    <view class="content">
        <theme-item v-for="item in 8"></theme-item>
        <theme-item :isMore="true"></theme-item>
    </view>

</view>
css
.theme {
  padding: 50rpx 0;
  .more {
    font-size: 32rpx;
    color: #888;
  }
  .content {
    margin-top: 30rpx;
    padding: 0 30rpx;
    display: grid;
    gap: 15rpx;
    grid-template-columns: repeat(3, 1fr);
  }
}

5.分类区域样式 ​

js
<view class="classLayout pageBg">
  <custom-nav-bar title="分类"></custom-nav-bar>
  <view class="classify">
    <theme-item v-for="item in 15"></theme-item>
  </view>
</view>
css
.classify {
  padding: 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
}

6.每个主题的卡片样式 ​

js
<view class="classlist">
  <view class="content">
    <navigator url="/pages/preview/preview" class="item" v-for="item in 10">
      <image src="../../common/images/preview2.jpg" mode="aspectFill"></image>
    </navigator>
  </view>
</view>
css
.classlist {
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}

7.预览界面样式 ​

js
  <swiper circular>
      <swiper-item v-for="item in 5">
        <image
          @click="maskChange"
          src="../../common/images/preview1.jpg"
          mode="aspectFill"
        ></image>
      </swiper-item>
    </swiper>
css
swiper {
  width: 100%;
  height: 100%;
  image {
    width: 100%;
    height: 100%;
  }
}

8.功能弹窗样式 ​

  • infoPopup
js
 <uni-popup ref="infoPopup" type="bottom">
    <view class="infoPopup">
    <view class="popHeader">
        <view></view>
        <view class="title">壁纸信息</view>
        <view class="close" @click="clickInfoClose">
        <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
        </view>
    </view>
    <scroll-view scroll-y>
        <view class="content">
        <view class="row">
            <view class="label">壁纸ID：</view>
            <text selectable class="value">12312312adfa</text>
        </view>

        <view class="row">
            <view class="label">分类：</view>
            <text class="value class">明星美女</text>
        </view>

        <view class="row">
            <view class="label">发布者：</view>
            <text class="value">咸虾米</text>
        </view>

        <view class="row">
            <text class="label">评分：</text>
            <view class="value roteBox">
            <uni-rate readonly touchable value="3.5" size="16" />
            <text class="score">5分</text>
            </view>
        </view>

        <view class="row">
            <text class="label">摘要：</text>
            <view class="value">
            摘要文字内容填充部分，摘要文字内容填充部分，摘要文字内容填充部分，摘要文字内容填充部分。
            </view>
        </view>

        <view class="row">
            <text class="label">标签：</text>
            <view class="value tabs">
            <view class="tab" v-for="item in 3">标签名</view>
            </view>
        </view>

        <view class="copyright"
            >声明：本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。
        </view>
        </view>
    </scroll-view>
    </view>
</uni-popup>
css
.infoPopup {
  background: #fff;
  padding: 30rpx;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  scroll-view {
    max-height: 60vh;
    .content {
      .row {
        display: flex;
        padding: 16rpx 0;
        font-size: 32rpx;
        line-height: 1.7em;
        .label {
          color: $text-font-color-3;
          width: 140rpx;
          text-align: right;
          font-size: 30rpx;
        }
        .value {
          flex: 1;
          width: 0;
        }
        .roteBox {
          display: flex;
          align-items: center;
          .score {
            font-size: 26rpx;
            color: $text-font-color-2;
            padding-left: 10rpx;
          }
        }
        .tabs {
          display: flex;
          flex-wrap: wrap;
          .tab {
            border: 1px solid $brand-theme-color;
            color: $brand-theme-color;
            font-size: 22rpx;
            padding: 10rpx 30rpx;
            border-radius: 40rpx;
            line-height: 1em;
            margin: 0 10rpx 10rpx 0;
          }
        }
        .class {
          color: $brand-theme-color;
        }
      }

      .copyright {
        font-size: 28rpx;
        padding: 20rpx;
        background: #f6f6f6;
        color: #666;
        border-radius: 10rpx;
        margin: 20rpx 0;
        line-height: 1.6em;
      }
    }
  }
}
  • scorePopup
js
<uni-popup ref="scorePopup" :is-mask-click="false">
    <view class="scorePopup">
    <view class="popHeader">
        <view></view>
        <view class="title">壁纸评分</view>
        <view class="close" @click="clickScoreClose">
        <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
        </view>
    </view>

    <view class="content">
        <uni-rate v-model="userScore" allowHalf />
        <text class="text">{{ userScore }}分</text>
    </view>

    <view class="footer">
        <button
        @click="submitScore"
        :disabled="!userScore"
        type="default"
        size="mini"
        plain
        >
        确认评分
        </button>
    </view>
    </view>
</uni-popup>
css
.scorePopup {
  background: #fff;
  padding: 30rpx;
  width: 70vw;
  border-radius: 30rpx;
  .content {
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
      color: #ffca3e;
      padding-left: 10rpx;
      width: 80rpx;
      line-height: 1em;
      text-align: right;
    }
  }
  .footer {
    padding: 10rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

9.我的模块样式 ​

js
 <view class="userInfo">
    <view class="avatar">
    <image src="../../static/images/xxmLogo.png" mode="aspectFill"></image>
    </view>
    <view class="ip">100.100.100.100</view>
    <view class="address">来自于：</view>
</view>

<view class="section">
    <view class="list">
    <navigator url="/pages/classlist/classlist" class="row">
        <view class="left">
        <uni-icons type="download-filled" size="20"></uni-icons>
        <view class="text">我的下载</view>
        </view>
        <view class="right">
        <view class="text">33</view>
        <uni-icons type="right" size="15" color="#aaa"></uni-icons>
        </view>
    </navigator>

    <navigator url="/pages/classlist/classlist" class="row">
        <view class="left">
        <uni-icons type="star-filled" size="20"></uni-icons>
        <view class="text">我的评分</view>
        </view>
        <view class="right">
        <view class="text">33</view>
        <uni-icons type="right" size="15" color="#aaa"></uni-icons>
        </view>
    </navigator>

    <view class="row">
        <view class="left">
        <uni-icons type="chatboxes-filled" size="20"></uni-icons>
        <view class="text">联系客服</view>
        </view>
        <view class="right">
        <view class="text"></view>
        <uni-icons type="right" size="15" color="#aaa"></uni-icons>
        </view>
        <!-- #ifdef MP -->
        <button open-type="contact">联系客服</button>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <button @click="clickContact">拨打电话</button>
        <!-- #endif -->
    </view>
    </view>
</view>
css
.userInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 50rpx 0;
  .avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .ip {
    font-size: 44rpx;
    color: #333;
    padding: 20rpx 0 5rpx;
  }
  .address {
    font-size: 28rpx;
    color: #aaa;
  }
}

.section {
  width: 690rpx;
  margin: 50rpx auto;
  border: 1px solid #eee;
  border-radius: 10rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
  .list {
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      height: 100rpx;
      border-bottom: 1px solid #eee;
      position: relative;
      background: #fff;
      &:last-child {
        border-bottom: 0;
      }
      .left {
        display: flex;
        align-items: center;
        :deep() {
          .uni-icons {
            color: $brand-theme-color !important;
          }
        }
        .text {
          padding-left: 20rpx;
          color: #666;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .text {
          font-size: 28rpx;
          color: #aaa;
        }
      }
      button {
        position: absolute;
        top: 0;
        left: 0;
        height: 100rpx;
        width: 100%;
        opacity: 0;
      }
    }
  }
}