分享页

src/pages/share/channels.vue

@@ -0,0 +1,108 @@
+<template>
+  <view class="app-container">
+    <open-app />
+    <!-- 12频道分享 -->
+    <view class="twelve_channels">
+      <view class="item" v-for="(item, index) in 12" :key="item" @click="getDetail">
+        <view class="logo">
+          <img src="@/static/logo.png" />
+          <view class="mask">{{ index + 1 }}</view>
+        </view>
+        <view class="content">
+          <view>
+            <text>猫王音乐台</text>
+            <text class="tips" v-if="item > 2">点播</text>
+          </view>
+          <view>猫王音乐台、猫王爵士圣经、猫猫猫</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: []
+    }
+  },
+  onLoad(e){
+    if(e){
+
+    }
+  },
+  methods: {
+    getDetail() {
+      uni.navigateTo({
+        url: `/pages/share/list`
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.twelve_channels {
+  margin-top: 48rpx;
+  .item:first-child,
+  .item:last-child {
+    margin: 0;
+  }
+
+  .item {
+    margin: 48rpx 0;
+    height: 136rpx;
+    display: flex;
+    align-items: center;
+
+    .logo {
+      width: 136rpx;
+      height: 136rpx;
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 10rpx;
+      }
+
+      .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 136rpx;
+        height: 136rpx;
+        text-align: center;
+        line-height: 136rpx;
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .content {
+      margin-left: 20rpx;
+      font-size: 28rpx;
+      line-height: 44rpx;
+
+      view:first-child {
+        .tips {
+          border: 2rpx solid rgba(255, 255, 255, 0.15);
+          border-radius: 50rpx;
+          font-size: 22rpx;
+          color: rgba(255, 255, 255, 0.7);
+          padding: 0 16rpx;
+          margin-left: 16rpx;
+        }
+      }
+
+      view:last-child {
+        width: 416rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+}
+</style>

src/pages/share/controls.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="app-container">
+    <!-- 背景 -->
+    <view class="bg" />
+    <!-- 跳转App -->
+    <open-app />
+    <!-- 播控分享 -->
+    <view class="play_control">
+      <view class="bg" />
+      <img class="cover" src="@/static/logo.png" />
+      <!-- <view class="FM">
+        <img src="@/static/logo.png" />
+        <text>以上内容来自蜻蜓FM</text>
+      </view> -->
+      <view style="fontSize: 48rpx;font-weight: 600;">001 蓝色天空</view>
+      <view style="fontSize: 28rpx; color: #727c82">咸鱼老师</view>
+      <view style="fontSize: 22rpx; color: #727c82; lineHeight: 64rpx">以上内容来自蜻蜓FM</view>
+      <slider min="0" max="100" block-color="#78B06A" block-size="12" activeColor="#78B06A"
+        backgroundColor="#727c82" />
+      <view
+        style="display: flex; justify-content: space-between; align-items: center; fontSize: 20rpx; color:#727c82">
+        <text>00:00</text>
+        <text>02:53</text>
+      </view>
+      <img class="play_btn" src="@/static/play.png" @click="open" />
+    </view>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    // 打开app
+    open(){
+      this.openApp()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.play_control {
+  text-align: center;
+  margin-top: 32rpx;
+
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#3b5735, #181818);
+    z-index: -1;
+  }
+
+  .cover {
+    width: 100%;
+    border-radius: 16rpx;
+    margin-bottom: 48rpx;
+  }
+
+  .FM {
+    width: 558rpx;
+    height: 606rpx;
+    border-radius: 16rpx;
+    padding: 32rpx 32rpx 0;
+    margin: 0 auto 32rpx auto;
+    background: rgba(255, 255, 255, 0.05);
+
+    img {
+      width: 494rpx;
+      height: 494rpx;
+      border-radius: 16rpx;
+    }
+
+    text {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.4);
+      margin-top: 20rpx;
+      float: left;
+    }
+  }
+
+  .play_btn {
+    width: 112rpx;
+    height: 112rpx;
+    margin-top: 48rpx;
+  }
+}
+</style>

src/pages/share/detail.vue

@@ -0,0 +1,214 @@
+<template>
+  <view class="app-container">
+    <!-- 背景 -->
+    <view class="bg" />
+    <!-- 跳转App -->
+    <open-app />
+    <!-- 详情 -->
+    <view class="detail">
+      <img class="logo" src="@/static/logo.png" />
+      <view class="content">
+        <text style="font-weight: 600;">我的声色犬马</text>
+        <view class="tips">
+          <img class="avatar" src="@/static/logo.png" />
+          <text>一个没有梦想的咸鱼</text>
+        </view>
+        <view class="play_number">
+          <img src="@/static/playnumber.png" />
+          <text>132万</text>
+        </view>
+      </view>
+    </view>
+    <text class="info">
+      <text>频道简介频道简介频道简介频道简介频道简介频道简介频道简介频道简介介频道简介介频道简介</text>
+      <uni-icons />
+    </text>
+    <!-- 列表 -->
+    <uni-segmented-control :current="current" styleType="text" :values="items" activeColor="#fff" />
+    <view v-show="current === 0" class="list_content">
+      <uni-row class="item" v-for="item in 12" :key="item" @click.native="getNav">
+        <uni-col :span="2" style="color:#FFFFFF66; fontSize: 28rpx; fontWeight:bold">
+          1
+        </uni-col>
+        <uni-col :span="20">
+          <view style="fontSize: 32rpx; margin-bottom: 10rpx;">001 梦想天空分外蓝</view>
+          <view style="display:flex; fontSize:22rpx; color:#FFFFFF66;">
+            <text class="time">02:53</text>
+            <text class="play">123</text>
+            <text class="date">2021-02-18</text>
+          </view>
+        </uni-col>
+        <uni-col :span="2">
+          <img src="@/static/playbtn.png" style="width: 48rpx;height: 48rpx" @click.stop="open" />
+        </uni-col>
+      </uni-row>
+    </view>
+    <view v-show="current === 1">
+      选项卡2的内容
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+      items: ['节目', '推荐']
+    }
+  },
+  methods: {
+    getNav() {
+      uni.navigateTo({
+        url: `/pages/share/controls`
+      })
+    },
+    // 打开app
+    open(){
+      this.openApp()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 450rpx;
+  background: linear-gradient(#3b5735, #181818);
+  z-index: -1;
+}
+
+.detail {
+  display: flex;
+  margin-top: 48rpx;
+
+  .logo {
+    width: 240rpx;
+    height: 240rpx;
+    border-radius: 16rpx;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 32rpx;
+
+    .tips {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 22rpx;
+      display: flex;
+      align-items: center;
+      margin-top: -32rpx;
+
+      .avatar {
+        width: 56rpx;
+        height: 56rpx;
+        border-radius: 50%;
+        margin-right: 20rpx;
+      }
+    }
+
+    .play_number {
+      display: flex;
+      align-content: center;
+      img {
+        width: 32rpx;
+        height: 32rpx;
+      }
+
+      text {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+}
+
+.info {
+  width: 100%;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 24rpx;
+  position: relative;
+  display: block;
+  margin: 32rpx 0 40rpx 0;
+
+  text {
+    display: inline-block;
+    width: 96%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.info::after {
+  content: '\e6b5';
+  font-family: uniicons;
+  position: absolute;
+  right: 0;
+  top: 5%;
+}
+
+::v-deep .segmented-control__item {
+  flex: none;
+  margin-right: 64rpx;
+}
+
+::v-deep .segmented-control__item--text::after {
+  content: '';
+  width: 32rpx;
+  height: 8rpx;
+  background: #a4d099;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%);
+  border-radius: 20rpx;
+}
+
+.list_content {
+  margin-top: 32rpx;
+  .item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 50rpx;
+  }
+  .item:last-child {
+    margin: 0;
+  }
+}
+
+.time,
+.play,
+.date {
+  display: flex;
+  align-items: center;
+  margin-right: 32rpx;
+}
+
+.time::before,
+.play::before,
+.date::before {
+  content: '';
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 8rpx;
+}
+
+.time::before {
+  background: url('@/static/time.png') no-repeat 100% / cover;
+}
+
+.play::before {
+  background: url('@/static/playnumber.png') no-repeat 100% / cover;
+}
+
+.date::before {
+  background: url('@/static/date.png') no-repeat 100% / cover;
+}
+</style>

src/pages/share/list.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="app-container">
+    <!-- 背景 -->
+    <view class="bg" />
+    <!-- 跳转App -->
+    <open-app />
+    <!-- 详情 -->
+    <view class="detail">
+      <img src="@/static/logo.png" />
+      <view class="content">
+        <view class="title">我的声色犬马</view>
+        <text class="tips">直播频道</text>
+        <view class="num">3个电台</view>
+        <view class="info">
+          <text>频道简介频道简介频道简介频道简介频道简介</text>
+          <uni-icons />
+        </view>
+      </view>
+    </view>
+    <!-- 列表 -->
+    <view class="list">
+      <view class="item" v-for="item in 3" :key="item" @click="getNav">
+        <img class="logo" src="@/static/logo.png" />
+        <view class="title">
+          <text>CNR音乐之声</text>
+          <text>音乐台 国家台</text>
+        </view>
+        <img class="play" src="@/static/playbtn.png" @click.stop="open" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    // 打开歌单
+    getNav() {
+      uni.navigateTo({
+        url: `/pages/share/detail`
+      })
+    },
+    // 打开app
+    open(){
+      this.openApp()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 450rpx;
+  background: linear-gradient(#3b5735, #181818);
+  z-index: -1;
+}
+
+.detail {
+  display: flex;
+  margin-top: 48rpx;
+
+  img {
+    width: 240rpx;
+    height: 240rpx;
+    border-radius: 16rpx;
+  }
+
+  .content {
+    margin-left: 32rpx;
+
+    .title {
+      font-weight: 600;
+      margin-bottom: 10rpx;
+    }
+
+    .tips {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 22rpx;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      border-radius: 20rpx;
+      padding: 2rpx 16rpx;
+    }
+
+    .num {
+      margin: 15rpx 0 35rpx 0;
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    .info {
+      width: 400rpx;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 24rpx;
+      position: relative;
+
+      text {
+        display: inline-block;
+        width: 360rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .info::after {
+      content: '\e6b5';
+      font-family: uniicons;
+      position: absolute;
+      right: 0rpx;
+      top: 5%;
+    }
+  }
+}
+
+.list {
+  margin-top: 80rpx;
+
+  .item:first-child,
+  .item:last-child {
+    margin: 0;
+  }
+
+  .item {
+    margin: 32rpx 0;
+    height: 160rpx;
+    position: relative;
+
+    .logo {
+      width: 160rpx;
+      height: 160rpx;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 16rpx;
+    }
+
+    .title {
+      position: absolute;
+      top: 50%;
+      left: 180rpx;
+      transform: translate(0, -50%);
+      display: flex;
+      flex-direction: column;
+
+      text:first-child {
+        font-size: 28rpx;
+      }
+      text:last-child {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+
+    .play {
+      width: 48rpx;
+      height: 48rpx;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(0, -50%);
+    }
+  }
+}
+</style>