Sfoglia il codice sorgente

fix(student/choiceQuestion): 完善投屏相关按钮和样式调整

1. 给多个页面的返回箭头添加投屏状态下的显示条件
2. 新增投屏和退出投屏的按钮组件
3. 调整顶部栏和头像区域的样式布局与溢出处理
lsc 22 ore fa
parent
commit
749bf2f051

+ 36 - 9
src/views/Student/components/choiceQuestionDetailDialog.vue

@@ -305,7 +305,7 @@
 
 
         <div class="c_t15_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
         <div class="c_t15_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
           <div class="c_t15_wd_top">
           <div class="c_t15_wd_top">
-            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')"  v-if="!isCastScreen"/>
+            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" v-if="!isCastScreen"/>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <div>{{ lookWorkData.name }}</div>
             <div>{{ lookWorkData.name }}</div>
             <div class="cast_sreen_btn" @click.stop="exitCastScreen"  v-if="(props.isCreator && props.roleType == 1 && isCastScreen) || (!isFollowModeActive && isCastScreen)">
             <div class="cast_sreen_btn" @click.stop="exitCastScreen"  v-if="(props.isCreator && props.roleType == 1 && isCastScreen) || (!isFollowModeActive && isCastScreen)">
@@ -355,6 +355,10 @@
             <div class="c_t15_c_i_top">
             <div class="c_t15_c_i_top">
               <span>{{ item.name.charAt(0) }}</span>
               <span>{{ item.name.charAt(0) }}</span>
               <div>{{ item.name }}</div>
               <div>{{ item.name }}</div>
+              <div class="cast_sreen_btn" @click.stop="castScreen(item)"  v-if="props.isCreator && props.roleType == 1 && isFollowModeActive && canValue">
+                <IconCastScreen />
+                {{ lang.ssCastScreen }}
+              </div>
             </div>
             </div>
             <div class="c_t73_c_i_bottom" v-if="item.content && item.content.fileList.length > 0">
             <div class="c_t73_c_i_bottom" v-if="item.content && item.content.fileList.length > 0">
               <img :src="item.content.fileList[0].url" />
               <img :src="item.content.fileList[0].url" />
@@ -373,9 +377,13 @@
 
 
         <div class="c_t79_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
         <div class="c_t79_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
           <div class="c_t79_wd_top">
           <div class="c_t79_wd_top">
-            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" />
+            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" v-if="!isCastScreen"/>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <div>{{ lookWorkData.name }}</div>
             <div>{{ lookWorkData.name }}</div>
+            <div class="cast_sreen_btn" @click.stop="exitCastScreen"  v-if="(props.isCreator && props.roleType == 1 && isCastScreen) || (!isFollowModeActive && isCastScreen)">
+              <IconCastScreen />
+              {{ lang.ssExitCastScreen }}
+            </div>
           </div>
           </div>
           <div class="c_t79_wd_content">
           <div class="c_t79_wd_content">
             <img :src="lookWorkData.content.fileList[lookWorkIndex].url"
             <img :src="lookWorkData.content.fileList[lookWorkIndex].url"
@@ -437,6 +445,10 @@
             <div class="c_t72_c_i_top">
             <div class="c_t72_c_i_top">
               <span>{{ item.name.charAt(0) }}</span>
               <span>{{ item.name.charAt(0) }}</span>
               <div>{{ item.name }}</div>
               <div>{{ item.name }}</div>
+              <div class="cast_sreen_btn" @click.stop="castScreen(item)"  v-if="props.isCreator && props.roleType == 1 && isFollowModeActive && canValue">
+                <IconCastScreen />
+                {{ lang.ssCastScreen }}
+              </div>
             </div>
             </div>
             <div class="bottom_btn" v-if="likeValue">
             <div class="bottom_btn" v-if="likeValue">
               <div class="bottom_like" :class="{'active': item.isLikes}"  @click.stop="handleLikeClick(item)">
               <div class="bottom_like" :class="{'active': item.isLikes}"  @click.stop="handleLikeClick(item)">
@@ -480,9 +492,13 @@
 
 
         <div class="c_t72_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
         <div class="c_t72_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
           <div class="c_t72_wd_top">
           <div class="c_t72_wd_top">
-            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" />
+            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" v-if="!isCastScreen"/>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <div>{{ lookWorkData.name }}</div>
             <div>{{ lookWorkData.name }}</div>
+            <div class="cast_sreen_btn" @click.stop="exitCastScreen"  v-if="(props.isCreator && props.roleType == 1 && isCastScreen) || (!isFollowModeActive && isCastScreen)">
+              <IconCastScreen />
+              {{ lang.ssExitCastScreen }}
+            </div>
           </div>
           </div>
           <div class="c_t72_wd_content">
           <div class="c_t72_wd_content">
             <template v-for="(item, index) in lookWorkData.content" :key="item.id">
             <template v-for="(item, index) in lookWorkData.content" :key="item.id">
@@ -557,6 +573,10 @@
             <div class="c_t73_c_i_top">
             <div class="c_t73_c_i_top">
               <span>{{ item.name.charAt(0) }}</span>
               <span>{{ item.name.charAt(0) }}</span>
               <div>{{ item.name }}</div>
               <div>{{ item.name }}</div>
+              <div class="cast_sreen_btn" @click.stop="castScreen(item)"  v-if="props.isCreator && props.roleType == 1 && isFollowModeActive && canValue">
+                <IconCastScreen />
+                {{ lang.ssCastScreen }}
+              </div>
             </div>
             </div>
             <div class="c_t73_c_i_bottom">
             <div class="c_t73_c_i_bottom">
               <img :src="item.content" />
               <img :src="item.content" />
@@ -572,9 +592,13 @@
 
 
         <div class="c_t73_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
         <div class="c_t73_workDetail" v-if="lookWorkData" @click.stop="clickContent(false)">
           <div class="c_t73_wd_top">
           <div class="c_t73_wd_top">
-            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" />
+            <img src="../../../assets/img/arrow_left.png" @click.stop="lookWork('')" v-if="!isCastScreen"/>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <span>{{ lookWorkData.name.charAt(0) }}</span>
             <div>{{ lookWorkData.name }}</div>
             <div>{{ lookWorkData.name }}</div>
+            <div class="cast_sreen_btn" @click.stop="exitCastScreen"  v-if="(props.isCreator && props.roleType == 1 && isCastScreen) || (!isFollowModeActive && isCastScreen)">
+              <IconCastScreen />
+              {{ lang.ssExitCastScreen }}
+            </div>
           </div>
           </div>
           <div class="c_t73_wd_content">
           <div class="c_t73_wd_content">
             <img :src="lookWorkData.content" />
             <img :src="lookWorkData.content" />
@@ -2800,6 +2824,7 @@ onUnmounted(() => {
           background: rgba(255, 255, 255, 0.6);
           background: rgba(255, 255, 255, 0.6);
           transition: 0.3s;
           transition: 0.3s;
           cursor: pointer;
           cursor: pointer;
+          overflow: hidden;
 
 
           &:hover {
           &:hover {
             box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
             box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
@@ -2810,10 +2835,11 @@ onUnmounted(() => {
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 10px;
+            width: 100%;
+            overflow: hidden;
 
 
             &>span {
             &>span {
-              display: block;
-              width: 25px;
+              min-width: 25px;
               height: 25px;
               height: 25px;
               display: flex;
               display: flex;
               align-items: center;
               align-items: center;
@@ -3020,6 +3046,7 @@ onUnmounted(() => {
           background: rgba(255, 255, 255, 0.6);
           background: rgba(255, 255, 255, 0.6);
           transition: 0.3s;
           transition: 0.3s;
           cursor: pointer;
           cursor: pointer;
+          overflow: hidden;
 
 
           &:hover {
           &:hover {
             box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
             box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
@@ -3028,13 +3055,13 @@ onUnmounted(() => {
 
 
           .c_t73_c_i_top {
           .c_t73_c_i_top {
             display: flex;
             display: flex;
-            width: 100%;
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 10px;
+            width: 100%;
+            overflow: hidden;
 
 
             &>span {
             &>span {
-              display: block;
-              width: 25px;
+              min-width: 25px;
               height: 25px;
               height: 25px;
               display: flex;
               display: flex;
               align-items: center;
               align-items: center;