采美百科页面

src/main/resources/static/css/encyclopedia/detail.css

@@ -41,6 +41,9 @@
     .bk-detail-right .bk-album img,.bk-detail-right .bk-company img{display:block;width:280px;height:220px}
     .bk-detail-right .bk-album video{display:block;width:280px;height:220px}
     .bk-detail-right .bk-album .swiper-container{height:220px}
+    .bk-detail-right .bk-album .swiper-container .swiper-slide{position: relative}
+    .bk-detail-right .bk-album .bk-play{width: 48px;height: 48px;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 48px;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
+        cursor: pointer;}
     .bk-detail-right .bk-album .bk-title,.bk-detail-right .bk-company .bk-title{font-size:18px;color:#333;text-align:center;line-height:58px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #DEDEDE;border-top-style:dashed}
     .bk-detail-right .bk-directory{width:280px;background:#FAFAFA;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 24px;margin-top:100px;position:sticky;top:280px}
     .bk-detail-right .bk-directory .bk-title{font-size:18px;font-weight:bold;margin-bottom:24px}
@@ -49,6 +52,11 @@
     .bk-detail-right .bk-directory .bk-content > ul > li > a{font-weight:bold;color:#333}
     .bk-detail-right .bk-directory .bk-content > ul > li > ul li{padding-left:24px;position:relative;color:#666666}
     .bk-detail-right .bk-directory .bk-content > ul > li > ul li:before{position:absolute;content:'●';left:10px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 944px;height: 642px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #f1f1f1;}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 15px;top: 15px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
 }
 
 @media screen and (max-width:768px){.bk-banner{height:3.4rem;position:relative;z-index:10;overflow:hidden}
@@ -78,11 +86,12 @@
     .bk-relevant .bk-album .bk-album-list{display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;height:3.2rem;margin-top:0.32rem;margin-bottom:0.4rem;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem}
     .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
     .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
-    .bk-relevant .bk-album .bk-album-list .bk-album-item{-ms-flex-negative:0;flex-shrink:0;width:4.2rem;height:3.2rem}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item{-ms-flex-negative:0;flex-shrink:0;width:4.2rem;height:3.2rem;position: relative;}
     .bk-relevant .bk-album .bk-album-list .bk-album-item:first-child{margin-left:0.32rem}
     .bk-relevant .bk-album .bk-album-list .bk-album-item:last-child{margin-right:0.32rem}
     .bk-relevant .bk-album .bk-album-list .bk-album-item img{display:block;width:100%;height:100%}
     .bk-relevant .bk-album .bk-album-list .bk-album-item video{display:block;width:100%;height:100%}
+    .bk-detail-right .bk-album .bk-play{width: 0.64rem;height: 0.64rem;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 0.64rem;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)}
     .bk-relevant .bk-company{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1.6rem;padding:0 0.2rem;margin:0 0.32rem 0.8rem;-webkit-box-sizing:border-box;box-sizing:border-box;border:0.01rem solid #DEDEDE;border-radius:0.08rem;background:#FAFAFA}
     .bk-relevant .bk-company .bk-cover{width:1.2rem;height:1.2rem;border-radius:0.08rem;border:0.01rem solid #DEDEDE}
     .bk-relevant .bk-company .bk-cover img{display:block;width:100%;height:100%}
@@ -98,4 +107,10 @@
     .bk-relevant .bk-directory .bk-directory-list li:last-child{margin-right:0.32rem}
     .bk-literature .bk-literature-list li em{font-style: normal;}
     .bk-literature .bk-literature-list li a.link{color: #F57C40; text-decoration: underline}
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+
 }

src/main/resources/static/js/encyclopedia/detail.js

@@ -47,4 +47,14 @@ $(function () {
             scrollTop: $('#' + id).offset().top
         }, {duration: 500, easing: "swing"});
     })
+
+    // 视频播放
+    $('.bk-album .bk-play').on('click', function(){
+        const videoUrl = $(this).siblings('video').attr('src');
+        $('#video-popup video').attr('src', videoUrl);
+        $('#video-popup').show();
+    })
+    $('#video-popup .close').on('click', function(){
+        $(this).parents('#video-popup').hide();
+    });
 })

src/main/resources/templates/encyclopedia/detail.html

@@ -53,6 +53,7 @@
                         <div class="bk-album-item" th:each="item : *{imageList}">
                             <img th:src="${item.image}" th:if="${item.type == 1}">
                             <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
+                            <span class="bk-play" th:if="${item.type == 2}"></span>
                         </div>
                     </div>
                 </div>
@@ -119,6 +120,7 @@
                         <div class="swiper-slide" th:each="item : *{imageList}">
                             <img th:src="${item.image}" th:if="${item.type == 1}">
                             <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
+                            <span class="bk-play" th:if="${item.type == 2}"></span>
                         </div>
                     </div>
                     <div class="swiper-pagination"></div>
@@ -140,6 +142,15 @@
     </div>
 </main>
 
+<!-- 视频播放弹窗 -->
+<div class="video-popup" style="display: none;" id="video-popup">
+    <div class="mask"></div>
+    <span class="close"></span>
+    <div class="content">
+        <video controls></video>
+    </div>
+</div>
+
 <!-- 底部区域 -->
 <template th:replace="encyclopedia/components/footer"></template>
 <!-- 底部区域 end -->

src/main/resources/templates/supplier-center/encyclopedia/edit.html

@@ -164,76 +164,72 @@
                 <div class="bk-tab-item" :class="{active: referenceType === 2}" @click="handleTabChange(2)">引用已有资料</div>
             </div>
             <div class="bk-dialog-content">
-                <template v-show="referenceType === 1">
-                    <el-form label-width="110px" ref="referenceForm" :model="referenceData" :rules="referenceRule">
-                        <el-form-item label="参考资料类型">
-                            <el-select class="max-width" v-model="referenceData.referenceType" @change="handleReferenceTypeChange">
-                                <el-option label="网络资料" :value="1"></el-option>
-                                <el-option label="著作资料" :value="2"></el-option>
-                                <el-option label="其它资料" :value="3"></el-option>
-                            </el-select>
+                <el-form label-width="110px" ref="referenceForm" :model="referenceData" :rules="referenceRule"  v-show="referenceType === 1">
+                    <el-form-item label="参考资料类型">
+                        <el-select class="max-width" v-model="referenceData.referenceType" @change="handleReferenceTypeChange">
+                            <el-option label="网络资料" :value="1"></el-option>
+                            <el-option label="著作资料" :value="2"></el-option>
+                            <el-option label="其它资料" :value="3"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <template v-if="referenceData.referenceType === 1">
+                        <el-form-item label="输入网址" prop="website">
+                            <el-input placeholder="请以http(s)://开头" v-model="referenceData.website"></el-input>
                         </el-form-item>
-                        <template v-if="referenceData.referenceType === 1">
-                            <el-form-item label="输入网址" prop="website">
-                                <el-input placeholder="请以http(s)://开头" v-model="referenceData.website"></el-input>
-                            </el-form-item>
-                            <el-form-item label="文章名字" prop="articleName">
-                                <el-input placeholder="请输入文章名字" v-model="referenceData.articleName"></el-input>
-                            </el-form-item>
-                            <el-form-item label="网站名称" prop="websiteName">
-                                <el-input placeholder="请输入网站名称，如新华网" v-model="referenceData.websiteName"></el-input>
-                            </el-form-item>
-                            <el-form-item label="发表日期" prop="publishTimeStr">
-                                <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publishTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
-                                <!-- <el-input placeholder="发表日期（示例：1970-01-01）" v-model="referenceData.publishTimeStr"></el-input> -->
-                            </el-form-item>
-                            <el-form-item label="引文日期" prop="acitationTimeStr">
-                                <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.acitationTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
-                                <!-- <el-input placeholder="引文日期（示例：1970-01-01）" v-model="referenceData.acitationTimeStr"></el-input> -->
-                            </el-form-item>
-                        </template>
-                        <template v-if="referenceData.referenceType === 2">
-                            <el-form-item label="作者" prop="author">
-                                <el-input placeholder="请输入作者名称，多个作者使用英文半角都好分割" v-model="referenceData.author"></el-input>
-                            </el-form-item>
-                            <el-form-item label="著作名" prop="workName">
-                                <el-input placeholder="请输入著作名" v-model="referenceData.workName"></el-input>
-                            </el-form-item>
-                            <el-form-item label="出版地" prop="publicationPlace">
-                                <el-input placeholder="请输入出版地信息" v-model="referenceData.publicationPlace"></el-input>
-                            </el-form-item>
-                            <el-form-item label="出版社" prop="press">
-                                <el-input placeholder="请输入出版社名称" v-model="referenceData.press"></el-input>
-                            </el-form-item>
-                            <el-form-item label="出版年" prop="publicationYearStr">
-                                <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publicationYearStr" type="date" placeholder="请选择出版日期"></el-date-picker>
-                                <!-- <el-input placeholder="请输入出版日期（示例：1970-01-01）" v-model="referenceData.publicationYearStr"></el-input> -->
-                            </el-form-item>
-                            <el-form-item label="引文页码" prop="acitationWeb">
-                                <el-input placeholder="请输入引用著作的页码，如100-121" v-model="referenceData.acitationWeb"></el-input>
-                            </el-form-item>
-                        </template>
-                        <template v-if="referenceData.referenceType === 3">
-                            <el-form-item label="参考资料说明" prop="referenceDescription">
-                                <el-input type="textarea" rows="4" placeholder="请输入其他类型参考资料" v-model="referenceData.referenceDescription"></el-input>
-                            </el-form-item>
-                            <el-form-item label="图片描述" prop="imageDescription">
-                                <el-input placeholder="请输入其他类型参考资料的具体描述" v-model="referenceData.imageDescription"></el-input>
-                            </el-form-item>
-                            <el-form-item label="图片上传" prop="imageUrl">
-                                <el-input v-show="false" v-model="referenceData.imageUrl"></el-input>
-                                <file-upload @upload-success="handleReferenceImageUploadSuccess" @remove="handleReferenceImageRemove" :list="referenceImageList"></file-upload>
-                            </el-form-item>
-                        </template>
-                    </el-form>
-                </template>
-                <template v-show="referenceType === 2">
-                    <ul class="bk-literature-list">
-                        <template v-for="(item, index) in formData.referenceList">
-                            <li :key="item.ctrlId" @click="handleSelectReference(item, index)"><span>[{{index+1}}]</span><span>{{item | reference}}</span></li>
-                        </template>
-                    </ul>
-                </template>
+                        <el-form-item label="文章名字" prop="articleName">
+                            <el-input placeholder="请输入文章名字" v-model="referenceData.articleName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="网站名称" prop="websiteName">
+                            <el-input placeholder="请输入网站名称，如新华网" v-model="referenceData.websiteName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="发表日期" prop="publishTimeStr">
+                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publishTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
+                            <!-- <el-input placeholder="发表日期（示例：1970-01-01）" v-model="referenceData.publishTimeStr"></el-input> -->
+                        </el-form-item>
+                        <el-form-item label="引文日期" prop="acitationTimeStr">
+                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.acitationTimeStr" type="date" placeholder="请选择出版日期"></el-date-picker>
+                            <!-- <el-input placeholder="引文日期（示例：1970-01-01）" v-model="referenceData.acitationTimeStr"></el-input> -->
+                        </el-form-item>
+                    </template>
+                    <template v-if="referenceData.referenceType === 2">
+                        <el-form-item label="作者" prop="author">
+                            <el-input placeholder="请输入作者名称，多个作者使用英文半角都好分割" v-model="referenceData.author"></el-input>
+                        </el-form-item>
+                        <el-form-item label="著作名" prop="workName">
+                            <el-input placeholder="请输入著作名" v-model="referenceData.workName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="出版地" prop="publicationPlace">
+                            <el-input placeholder="请输入出版地信息" v-model="referenceData.publicationPlace"></el-input>
+                        </el-form-item>
+                        <el-form-item label="出版社" prop="press">
+                            <el-input placeholder="请输入出版社名称" v-model="referenceData.press"></el-input>
+                        </el-form-item>
+                        <el-form-item label="出版年" prop="publicationYearStr">
+                            <el-date-picker class="max-width" value-format="yyyy-MM-dd" v-model="referenceData.publicationYearStr" type="date" placeholder="请选择出版日期"></el-date-picker>
+                            <!-- <el-input placeholder="请输入出版日期（示例：1970-01-01）" v-model="referenceData.publicationYearStr"></el-input> -->
+                        </el-form-item>
+                        <el-form-item label="引文页码" prop="acitationWeb">
+                            <el-input placeholder="请输入引用著作的页码，如100-121" v-model="referenceData.acitationWeb"></el-input>
+                        </el-form-item>
+                    </template>
+                    <template v-if="referenceData.referenceType === 3">
+                        <el-form-item label="参考资料说明" prop="referenceDescription">
+                            <el-input type="textarea" rows="4" placeholder="请输入其他类型参考资料" v-model="referenceData.referenceDescription"></el-input>
+                        </el-form-item>
+                        <el-form-item label="图片描述" prop="imageDescription">
+                            <el-input placeholder="请输入其他类型参考资料的具体描述" v-model="referenceData.imageDescription"></el-input>
+                        </el-form-item>
+                        <el-form-item label="图片上传" prop="imageUrl">
+                            <el-input v-show="false" v-model="referenceData.imageUrl"></el-input>
+                            <file-upload @upload-success="handleReferenceImageUploadSuccess" @remove="handleReferenceImageRemove" :list="referenceImageList"></file-upload>
+                        </el-form-item>
+                    </template>
+                </el-form>
+                <ul class="bk-literature-list" v-show="referenceType === 2">
+                    <template v-for="(item, index) in formData.referenceList">
+                        <li :key="item.ctrlId" @click="handleSelectReference(item, index)"><span>[{{index+1}}]</span><span>{{item | reference}}</span></li>
+                    </template>
+                </ul>
             </div>
             <div class="bk-dialog-footer">
                 <button class="bk-cancel" @click="handleRefDialogClose">取消</button>