|
@@ -1,238 +1,249 @@
|
|
|
<template>
|
|
|
- <div class="playerList">
|
|
|
- <div class="top">
|
|
|
- <div class="playBody">
|
|
|
- <div class="box">
|
|
|
- <div class="byted-card byted-card-inner-line byted-card-bordered css-deu8f5" v-for="(item) in playerList" :key="item.id">
|
|
|
- <div class="byted-card-body">
|
|
|
- <div class="media">
|
|
|
- <div class="main_img">
|
|
|
- <img src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe/tmpl/file/2020082420341062812025.png" alt="图片加载失败">
|
|
|
- </div>
|
|
|
- <div class="hoverBody">
|
|
|
- <div class="blackBG">
|
|
|
- <a-button type="primary" @click="preview(item)">弹窗预览</a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div >
|
|
|
- <h5 class="css-1lrzuem">
|
|
|
- <span class="tip">{{item.product}}</span>
|
|
|
- {{item.type}}
|
|
|
- </h5>
|
|
|
- <div class="css-vfnok7"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="playerList">
|
|
|
+ <div class="top">
|
|
|
+ <div class="playBody">
|
|
|
+ <div class="box">
|
|
|
+ <div
|
|
|
+ class="byted-card byted-card-inner-line byted-card-bordered css-deu8f5"
|
|
|
+ v-for="item in playerList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div class="byted-card-body">
|
|
|
+ <div class="media">
|
|
|
+ <div class="main_img">
|
|
|
+ <img
|
|
|
+ src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe/tmpl/file/2020082420341062812025.png"
|
|
|
+ alt="图片加载失败"
|
|
|
+ />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="previewBody" v-show="previewBody">
|
|
|
- <div class="content">
|
|
|
- <div class="content-inner">
|
|
|
- <div class="phone">
|
|
|
- <iframe :src="playerSrc" width="274" height="487" frameborder="0"></iframe>
|
|
|
- </div>
|
|
|
- <a-button type='default' @click="closePreview" size='large' class="closePreviewBtn">关闭预览</a-button>
|
|
|
+ <div class="hoverBody">
|
|
|
+ <div class="blackBG">
|
|
|
+ <a-button type="primary" @click="preview(item)" style="margin-bottom: 30px">弹窗预览</a-button>
|
|
|
+ <a-button type="primary" @click="previewVisible=true">使用模板</a-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h5 class="css-1lrzuem">
|
|
|
+ <span class="tip">{{ item.product }}</span>
|
|
|
+ {{ item.type }}
|
|
|
+ </h5>
|
|
|
+ <div class="css-vfnok7"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="previewBody" v-if="previewBody">
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-inner">
|
|
|
+ <div class="phone">
|
|
|
+ <iframe :src="playerSrc" width="274" height="487" frameborder="0"></iframe>
|
|
|
+ </div>
|
|
|
+ <a-button type="default" @click="closePreview" size="large" class="closePreviewBtn">关闭预览</a-button>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <a-modal title="素材替换" :visible="previewVisible" @cancel="handleCancel" :width="1000"> </a-modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import playerList from './playerData';
|
|
|
+import playerList from './playerData'
|
|
|
|
|
|
console.log(playerList)
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- playerList,
|
|
|
- previewBody:false,
|
|
|
- playerSrc:'',
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- preview(item){
|
|
|
- console.log(item);
|
|
|
- this.previewBody=true;
|
|
|
- this.playerSrc=item.link
|
|
|
- },
|
|
|
- closePreview(){
|
|
|
- this.previewBody=false;
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ playerList,
|
|
|
+ previewBody: false,
|
|
|
+ playerSrc: '',
|
|
|
+ previewVisible: false,
|
|
|
}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ preview(item) {
|
|
|
+ console.log(item)
|
|
|
+ this.previewBody = true
|
|
|
+ this.playerSrc = item.link
|
|
|
+ },
|
|
|
+ closePreview() {
|
|
|
+ this.previewBody = false
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.previewVisible = false
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.playerList{
|
|
|
-
|
|
|
- position: relative;
|
|
|
- .top{
|
|
|
- width: calc(100% - 160px);
|
|
|
- margin: 0px auto;
|
|
|
- }
|
|
|
- .playBody{
|
|
|
+.playerList {
|
|
|
+ position: relative;
|
|
|
+ .top {
|
|
|
+ width: calc(100% - 160px);
|
|
|
+ margin: 0px auto;
|
|
|
+ }
|
|
|
+ .playBody {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .css-deu8f5 {
|
|
|
+ width: 224px;
|
|
|
+ margin: 10px !important;
|
|
|
+ }
|
|
|
+ .byted-card-inner-line {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .byted-card-bordered {
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .byted-card {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ position: relative;
|
|
|
+ color: #333;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ border: 1px solid transparent;
|
|
|
+ }
|
|
|
+ .byted-card > .byted-card-body {
|
|
|
+ box-shadow: rgb(204, 204, 204) 0px 0px 10px;
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+ .byted-card > .byted-card-body .media {
|
|
|
+ height: 392px;
|
|
|
width: 100%;
|
|
|
- padding: 20px;
|
|
|
- .box{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- -webkit-box-pack: center;
|
|
|
- justify-content: flex-start;
|
|
|
- .css-deu8f5 {
|
|
|
- width: 224px;
|
|
|
- margin: 10px !important;
|
|
|
- }
|
|
|
- .byted-card-inner-line {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .byted-card-bordered {
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
- .byted-card {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- position: relative;
|
|
|
- color: #333;
|
|
|
- background: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: 0 1px 6px 0 rgba(0,0,0,.05);
|
|
|
- border: 1px solid transparent;
|
|
|
- }
|
|
|
- .byted-card > .byted-card-body {
|
|
|
- box-shadow: rgb(204, 204, 204) 0px 0px 10px;
|
|
|
- padding: 0px !important;
|
|
|
- }
|
|
|
- .byted-card > .byted-card-body .media {
|
|
|
- height: 392px;
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- overflow: hidden;
|
|
|
- border-bottom: 1px solid rgb(204, 204, 204);
|
|
|
- }
|
|
|
- .byted-card > .byted-card-body .media .main_img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- -webkit-box-align: center;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .byted-card > .byted-card-body .media .main_img img:last-child {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .byted-card > .byted-card-body .media .main_img img:first-child {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- // filter: blur(10px);
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .css-1lrzuem {
|
|
|
- display: flex;
|
|
|
- -webkit-box-align: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: rgb(51, 51, 51);
|
|
|
- line-height: 20px;
|
|
|
- text-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
|
|
|
- word-break: keep-all;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- margin: 16px 16px 0px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .css-vfnok7 {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row-reverse;
|
|
|
- -webkit-box-align: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .hoverBody{
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- }
|
|
|
- .blackBG{
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- -webkit-box-align: center;
|
|
|
- align-items: center;
|
|
|
- -webkit-box-pack: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
-
|
|
|
- }
|
|
|
- .byted-card:hover {
|
|
|
- box-shadow: rgb(153, 153, 153) 0px 0px 20px;
|
|
|
- }
|
|
|
- .byted-card:hover .hoverBody{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .tip{
|
|
|
- display: inline-block;
|
|
|
- margin-right: 15px;
|
|
|
- background: #FF6633;
|
|
|
- width: 80px;
|
|
|
- padding: 2px 10px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .previewBody{
|
|
|
- background: rgba(0,0,0,.5);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 1px solid rgb(204, 204, 204);
|
|
|
+ }
|
|
|
+ .byted-card > .byted-card-body .media .main_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- padding: 20px 80px;
|
|
|
+ }
|
|
|
+ .byted-card > .byted-card-body .media .main_img img:last-child {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .byted-card > .byted-card-body .media .main_img img:first-child {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- .content{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content-inner{
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- padding: 0 24px 8px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- position: fixed;
|
|
|
- top: 200px;
|
|
|
- }
|
|
|
- .phone {
|
|
|
- background-color: rgb(255, 255, 255);
|
|
|
- position: relative;
|
|
|
- padding: 9px 8px 7px;
|
|
|
- border-radius: 24px;
|
|
|
- }
|
|
|
- .phone iframe {
|
|
|
- border-radius: 18px;
|
|
|
- }
|
|
|
- .closePreviewBtn{
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
+ // filter: blur(10px);
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .css-1lrzuem {
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ line-height: 20px;
|
|
|
+ text-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
|
|
|
+ word-break: keep-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin: 16px 16px 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .css-vfnok7 {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .hoverBody {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .blackBG {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ flex-flow: column;
|
|
|
+ }
|
|
|
+ .byted-card:hover {
|
|
|
+ box-shadow: rgb(153, 153, 153) 0px 0px 20px;
|
|
|
+ }
|
|
|
+ .byted-card:hover .hoverBody {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 15px;
|
|
|
+ background: #ff6633;
|
|
|
+ width: 80px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .previewBody {
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 20px 80px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .content-inner {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 0 24px 8px;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ position: fixed;
|
|
|
+ top: 200px;
|
|
|
+ }
|
|
|
+ .phone {
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ position: relative;
|
|
|
+ padding: 9px 8px 7px;
|
|
|
+ border-radius: 24px;
|
|
|
+ }
|
|
|
+ .phone iframe {
|
|
|
+ border-radius: 18px;
|
|
|
+ }
|
|
|
+ .closePreviewBtn {
|
|
|
+ margin-top: 30px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|