components/index/zhibo-item/index.vue

@@ -8,7 +8,7 @@
             </view>
             <view class="pingbi">
                 <image></image>
-                <text>屏蔽用户</text>
+                <text>1屏蔽用户</text>
             </view>
         </view>
     </view>    

pageB/zhibo/index.nvue

@@ -0,0 +1,126 @@
+<template>
+  <view>
+    <video :src="url" class="vodio" autoplay="true" :show-fullscreen-btn="false" :show-play-btn="false" :enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="false" :controls="false" :style="{'height':height}">
+
+    </video>
+    <view class="user" :style="{'top': top}">
+      <view class="back"></view>
+      <image class="head"></image>
+      <view class="userinfo">
+        <text class="name">萨和登</text>
+        <text class="info">萨大赛大赛大赛大赛大</text>
+      </view>
+      <view class="guanzhu"><text style="color:#fff;font-size:24rpx">关注</text></view>
+    </view>
+    <view class="userlist" :style="{'top': top + 10 * rpx}">
+        <image class="userlistitem" v-for="(i,j) in [0,2]" :style="{'right': (-j * 15 * rpx) + 'px'}"></image>
+    </view>
+    
+  </view>
+</template>
+<style lang="scss" scoped>
+.userlistitem{
+    width: 60rpx;
+    height: 60rpx;
+    position: relative;
+    background-color: #0f0;
+    border-radius: 30rpx;
+
+}
+.userlist{
+    display: flex;
+    flex-direction: row-reverse;
+    width: 150rpx; 
+    height: 60rpx;
+    position: fixed;
+    right: 156rpx;
+
+}
+.name {
+  font-size: 24rpx;
+  color: #fff;
+  lines: 1;
+  text-overflow: ellipsis;
+}
+.info {
+  font-size: 20rpx;
+  color: #fff;
+  margin-top: 6rpx;
+  lines: 1;
+  text-overflow: ellipsis;
+}
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  width: 100rpx;
+  margin-left: 20rpx;
+
+}
+.guanzhu {
+  width: 100rpx;
+  height: 50rpx;
+  background-color: #ff780f;
+  border-radius: 25rpx;
+  margin-left: 10rpx;
+  align-items: center;
+  justify-content: center;
+}
+.head {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 35rpx;
+  background-color: #0f0;
+}
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.2;
+  width: 308rpx;
+  height: 70rpx;
+  border-radius: 35rpx;
+}
+.user {
+  position: fixed;
+  left: 30rpx;
+  width: 308rpx;
+  height: 70rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 35rpx;
+  overflow: hidden;
+  flex-direction: row;
+}
+.video {
+  width: 750rpx;
+}
+</style>
+<script>
+export default {
+  name: "zhibo",
+  data() {
+    return {
+      url: "",
+      top: 0,
+      height: 0,
+      rpx:0
+    };
+  },
+  onLoad(a) {
+    this.url = a.url;
+    console.log(this.url);
+    let that = this;
+    uni.getSystemInfo({
+      success(a) {
+        console.log(a.windowHeight);
+        that.height = a.windowHeight;
+        // that.start()
+        that.top = a.statusBarHeight + 5;
+        that.rpx = (a.windowWidth / 750)
+        console.log(that.rpx)
+      },
+    });
+  },
+};
+</script>

pageB/zhibo/index.vue

@@ -1,38 +0,0 @@
-<template>
-    <view>
-        <video :src="url" class="vodio" autoplay="true">
-
-        </video>
-        <!-- <view class="user">
-            <view class="back"></view>
-            <image></image>
-            <view>
-                <text class="name">萨和登</text>
-                <text class="info">萨大赛大赛大赛大赛大</text>
-            </view>
-            <view class="guanzhu">
-                关注
-            </view >
-        </view> -->
-    </view>
-</template>
-<style lang="scss" scoped>
-.vodio{
-    width: 100vw;
-    height: 100vh;
-}
-</style>
-<script>
-export default {
-    name:"zhibo",
-    data(){
-        return {
-            url:""
-        }
-    },
-    onLoad(a){
-        this.url = a.url
-        console.log(this.url)
-    }
-}
-</script>