yb9.0

pages.json

@@ -52,6 +52,13 @@
 			"style":{
 				"navigationBarTitleText": ""
 			}
+		},
+		{
+			"path":"pages/voice/voice",
+			"style": {
+				"navigationBarTitleText": "语音播报",
+				"enablePullDownRefresh": true
+			}
 		}
 	],
 	"subPackages":[

pages/voice/voice.vue

@@ -0,0 +1,118 @@
+<template>
+    <view class="voice-play-page">
+        <view class="list-wrap">
+            <view class="item">
+                <view class="van-ellipsis title">这是一段最多显示一行的文字，多余的内容会被省略</view>
+                <view class="time">发布时间：</view>
+                <view class="flex audio-box">
+                    <image src="@/static/voice/pause.png" mode="widthFix" />
+                    <text>06:27</text>
+                </view>
+                <image class="del-btn" src="@/static/voice/del.png" mode="widthFix" />
+                <button 
+                    class="share-btn" 
+                    open-type="share" 
+                >
+                    <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
+                </button>
+            </view>
+        </view>
+
+        <navigator url="/pages-voice/addVoice">
+            <view class="add-btn">新建语音</view>
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    },
+    onLoad(options){
+
+    },
+    methods: {
+        
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.voice-play-page{
+    padding: 34rpx;
+    
+}
+.list-wrap{
+    .item{
+        border-bottom: 1px solid #CDCDCD;
+        padding: 30rpx 0;
+        position: relative;
+        .del-btn{
+            position: absolute;
+            right: 130rpx;
+            bottom: 30rpx;
+            width: 32rpx;
+            height: 32rpx;
+        }
+        .share-btn{
+            position: absolute;
+            bottom: 30rpx;
+            right: 34rpx;
+            background-color: transparent;
+            width: 36rpx;
+            height: 36rpx;
+            line-height: 1;
+            padding: 0;
+            &::after{
+                border: none;
+            }
+        }
+        .share-img{
+            width: 32.5rpx;
+            height: 32rpx;
+        }
+        .title{
+            font-size: 32rpx;
+        }
+        .time{
+            font-size: 28rpx;
+            color: #666;
+            margin-top: 20rpx;
+            margin-bottom: 30rpx;
+        }
+        .audio-box{
+            width: 185rpx;
+            height: 56rpx;
+            align-items: center;
+            justify-content: center;
+            border-radius: 28rpx;
+            background-color: #F4E1C9;
+            color: #E3B377;
+            image{
+                width: 23rpx;
+                height: 28rpx;
+                margin-right: 20rpx;
+            }
+        }
+    }
+
+}
+.add-btn{
+    position: fixed;
+    width: 514rpx;
+    height: 80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    color: #E3B377;
+    font-size: 32rpx;
+    left: 50%;
+    bottom: 100rpx;
+    transform: translateX(-50%);
+    background: #333333;
+    box-shadow: 0px 4rpx 20rpx rgba(160, 126, 84, 0.25);
+    border-radius: 40rpx;
+}
+</style>