关于详情页视频播放问题

关于详情页视频播放问题, 需要模板请联系QQ344182049

解决shopxo详情页带两个播放器,点击播放暂停在播放会同时播放两个播放器的问题,解决部分浏览器播放顶层无法关闭视频问题,百度浏览器测试无法关闭播放器弹顶层问题,,  需要模板请联系QQ344182049

attachments-2020-10-GWImzd515f8d5265e17d7.pngattachments-2020-10-ZRVU61W35f8d5281a6cd0.pngattachments-2020-10-a8026o7u5f8d52964fee4.png

直接放代码带有返回上一页图标,代码看头和尾和你的衔接,进行复制粘贴就可以,goode  ,html 部分

<!-- goods category -->

{{include file="public/goods_category" /}}


<div class="goods-detail" data-id="{{$goods.id}}" data-spec-detail-ajax-url="{{:MyUrl('index/goods/specdetail')}}" data-spec-type-ajax-url="{{:MyUrl('index/goods/spectype')}}">

  

    <!-- 基础信息 -->

    <div class="item-inform am-container">

        <!-- pc放大镜 / 左侧 -->

        <div class="clearfix-left scoll" id="clearcontent">

            <div class="box slider-content">

<div class="zhuye"><a href="javascript:window.history.back(-1)" target="_self"><img src="../../../../../public/static/index/default/images/icfh.png" alt=""/></a></div>

<div data-am-widget="slider" class="am-slider am-slider-a1 min1025" data-am-slider='{"directionNav":false}' >

                <ul class="am-slides">

                    {{if !empty($goods.photo)}}

                        {{foreach $goods.photo as $photo}}

                            <li>

                                <img src="{{$photo.images}}" title="{{$goods.title}}" />

                            </li>

                        {{/foreach}}

                    {{/if}}

                </ul>

            </div>

                <div class="tb-booth tb-pic tb-s310 ma1025">

                    {{if !empty($goods['photo'][0])}}

                        <img src="{{$goods['photo'][0]['images']}}" alt="{{$goods.title}}" rel="{{$goods['photo'][0]['images']}}" class="jqzoom" />

                    {{/if}}

                </div>

                <ul class="tb-thumb ma1025" id="thumblist">

                    {{if !empty($goods.photo)}}

                        {{foreach $goods.photo as $photo_key=>$photo}}

                            <li class="{{if $photo_key eq 0}}tb-selected{{else /}} tb-pic{{/if}}">

                                <div class="tb-pic tb-s40">

                                    <a href="javascript:;">

                                        <img src="{{$photo.images}}" mid="{{$photo.images}}" big="{{$photo.images}}" class="tb-s40" />

                                    </a>

                                </div>

                            </li>

                        {{/foreach}}

                    {{/if}}

                </ul>


                <!-- 视频 -->

                {{if !empty($goods.video)}}

                    <i class="am-icon-play-circle-o goods-video-submit-start"></i>

                    <i class="goods-video-submit-close none">&times;</i>

                    <video class="goods-video-container none" src="{{$goods.video}}" controls="controls" preload="auto" x5-video-player-type="h5" webkit-playsinline playsinline style="width= 100%; height=100%; object-fit: fill">

                        your browser does not support the video tag

                    </video>

                {{/if}}


                <!-- 商品页面相册内部钩子 -->

                {{if isset($shopxo_is_develop) and $shopxo_is_develop eq true and (!isset($is_footer) or $is_footer eq 1)}}

                    <div class="plugins-tag">

                        <span>plugins_view_goods_detail_photo_within</span>

                    </div>

                {{/if}}

                {{if !empty($plugins_view_goods_detail_photo_within_data) and is_array($plugins_view_goods_detail_photo_within_data)}}

                    {{foreach $plugins_view_goods_detail_photo_within_data as $hook}}

                        {{if is_string($hook) or is_int($hook)}}

                            {{$hook|raw}}

                        {{/if}}

                    {{/foreach}}

                {{/if}}

            </div>


            <!-- 商品页面相册底部钩子 -->

            {{if isset($shopxo_is_develop) and $shopxo_is_develop eq true and (!isset($is_footer) or $is_footer eq 1)}}

                <div class="plugins-tag">

                    <span>plugins_view_goods_detail_photo_bottom</span>

                </div>

            {{/if}}

            {{if !empty($plugins_view_goods_detail_photo_bottom_data) and is_array($plugins_view_goods_detail_photo_bottom_data)}}

                {{foreach $plugins_view_goods_detail_photo_bottom_data as $hook}}

                    {{if is_string($hook) or is_int($hook)}}

                        {{$hook|raw}}

                    {{/if}}

                {{/foreach}}

            {{/if}}

        </div>


        <!-- 右侧 -->


css 部分,代码太乱全部复制了,CSS部分是我自己的模板样式改变的地方多,按照你的需求要自己改动

@charset "utf-8";

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

a{text-decoration:none;cursor:pointer}

.clear{clear: both;}

/* input */

input{font-size:12px;font-size:100%;outline:none;line-height:normal;color:#444;}

.ipt{border:solid 1px #d2d2d2;border-left-color:#ccc;border-top-color:#ccc;border-radius:2px;box-shadow:inset 0 1px 0 #f8f8f8;background-color:#fff;padding:4px 6px;height:21px;line-height:21px;color:#555;width:180px;vertical-align:baseline;}

.ipt:focus{border-color:#95C8F1;box-shadow:0 0 4px #95C8F1;}

.buy-event,.item-props-can{cursor: pointer;}


.theme-popover-mask{z-index:1000;position:fixed;left:0;top:0;width:100%;height:100%;background:#333;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}

.theme-popover{z-index:1001;position:fixed;bottom:0;left:0;width:100%;display:none;}

.theme-poptit{padding:12px;position:relative;overflow: hidden;background:rgba(255,255,255,.2) ;height:80px ;}

.theme-poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;font:bold 14px/14px simsun;text-shadow:0 1px 0 #ddd}

.theme-poptit .close:hover{color:#444;}

.theme-popover .confirm {background: #f00; border-color: #f00; color: #fff !important;}


/* 轮播 */

.scoll { margin-bottom: 10px; position: relative; }


/*内容布局*/

.theme-popover .theme-poptit h3,.btn.close,i.buy-event, form.buy-form {display:none}

.theme-span{width:100%;background:transparent;height: 15px;}

.theme-popbod.dform{background:rgba(255,255,255,.2);}

/*商品信息*/

.heme-signin{position:relative;}

.theme-signin-right {background:#fff;overflow: visible;}

.theme-signin-right .img-info{position: absolute;top:0;left:10px;background:rgba(255,255,255,.2);border-radius:5px;border:1px solid #f5f5f5;}

.theme-signin-right .img-info img{margin:5px 5px ;width:80px;height:80px ;}

.theme-signin-right .text-info{position:absolute;left:110px;top:20px ;}

.text-info .price-now{display:block;font-size:16px ;color:#ff0000;}

.stock-tips{ font-size:12px; }


/*可选规格*/

.iteminfo_parameter { margin-bottom: 10px; }

.theme-signin-left{padding-bottom:30px;max-height:250px ;overflow-y: scroll;background: rgba(255,255,255,.2);}

.theme-options{display: block;overflow: hidden;padding-left: 10px;padding-right:10px; margin-bottom: 5px;}

.theme-signin-left .cart-title{font-size:14px ;font-weight: 600;}

.theme-signin-left .sku-line{float: left; margin:10px;margin-left:0;border-radius:3px ; background:rgba(255,255,255,.8); padding:0px 8px; border: 1px solid rgba(255,255,255,.8);}

.theme-signin-left .sku-line.selected{background:rgba(238,12,3,.8);color: #fff; border: 1px solid #f90000;}

.sku-line-images { padding:3px !important; }

.sku-line-images img { width: 30px; height: 30px; vertical-align: middle; }

.theme-signin .btn{width:100%;font-size: 16px;padding:5px ;}

.btn-op{position:fixed;left:0;bottom: 0;width:100%; z-index: 3;}

.iteminfo_parameter dt.buy-event {text-align: left;width:100% ;}


.theme-options dd{margin:10px 0px ;}

.introduce-main .am-sticky-placeholder { margin: 0px !important; }

.am-sticky-placeholder .am-nav-tabs > li span { color: #333; }

.am-sticky-placeholder .am-nav-tabs > li.am-active span { color: #333; }

.attr-not-active { border: 1px solid #f03726 !important; box-shadow: 0 0px 3px #ed7f76, 0 0 6px rgba(0, 0, 0, 0); }

.sku-items-disabled { color: #333 !important; background-color: rgba(255,255,255,.8) !important; border: 1px dashed #555 !important; box-shadow: none !important; }

.sku-dont-choose { color: #555 !important; background-color: rgba(255,255,255,.8) !important; border: 1px solid # #7C7C7C !important; box-shadow: none !important; }

.sku-dont-choose img { opacity: 0.5; }

.sku-items-disabled img{ opacity: 0.3; }


/* 购买导航 */

.buy-nav { position: fixed; bottom: 0px; right: 0px; z-index: 1000; width: 100%; background: rgba(255,255,255,.1); }

.buy-nav-opt a { color: #ff0000;}

.text-active { color: #ff0000 !important;}

.buy-nav-opt span { font-size: 12px; color: #ff0000; }


/* 商品评论 */

.goods-comment .am-comment { margin-top: 15px; text-align: left; }

.goods-comment .am-comment-main { border: 1px solid #eee; }

.goods-comment .comment-spec { color: #B0B0B0; }

.comment-reply { border-top: 1px dashed #eee; margin-top: 10px; padding-top: 10px; }

.goods-comment .am-comment .am-comment-hd { background: rgba(255,255,255,.2); }

.goods-comment .am-comment .am-comment-main:after { border-right-color: rgba(255,255,255,.3); }

.goods-comment .comment-images, .goods-comment .comment-spec { margin-top: 5px; }

.goods-comment .comment-images img { width: 50px; height: 50px; border: 1px solid #eee; }

.goods-comment .comment-images li:not(:last-child) { margin-right: 5px; }

.comment-reply-title { color: #666; }

.comment-reply-desc { color: #905602; }


/* 评分 */

.score-container { border-color: #eee; padding: 15px 25px; border-style: none solid solid solid; border-width: 1px; }

.score-container .score { width: 80px; border-right: 1px solid #eee; padding-right: 25px; }

.score-container .score .name { color: #666; }

.score-container .score .value { color: #f03726; font-weight: 700; font-size: 32px; line-height: 32px; margin-top: 5px; }

.score-container .am-progress { width: calc(100% - 105px); margin-bottom: 0; margin-top: 18px; line-height: 2rem; text-align: center; }


/*详情*/

.detail-content img { max-width: 100%; height: auto; }

.lei2{padding: 0 6px;}


@media only screen and (min-width:640px) {

    .theme-span{height:0px;background:rgba(255,255,255,.3);}

    .theme-popover{box-shadow:0 0 10px #666;position:fixed;top:20%;left:calc(50% - 250px);width:500px;bottom:auto;border:solid 6px #d3d3d3;border-radius:3px;}

    .theme-poptit{display: none;}


    /*商品规格*/

    .theme-signin-left{padding-top:10px ;float: left;max-height: none;overflow: visible;}

    .theme-options .cart-title{margin-top:5px ;}

    .theme-options ul{float: left;}


    .theme-signin-left .sku-line { ;margin:5px;}

    

    /*选中样式*/

    .sku-line{position: relative;}

    .theme-options li a:hover{ border:1px solid #f90000; padding:0 5px; text-decoration:none;}

    .theme-options li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:0px; bottom:0px; background:url(../images/sys-item-selected.gif) no-repeat right bottom; z-index:99; display:none;}

    .theme-options li.selected a{ border:1px solid #ff0000; padding:0 5px;}

    .theme-options li.selected i{ display:block;}


    /*商品信息*/

    .theme-signin-right{display: none;}

    .text-info .price-now{float: left;margin-right:10px ;}

    .text-info span.stock-tips {float:left;font-size: 12px;}



    /*操作*/

    .btn-op{overflow: hidden;padding:10px 30%; position: static;}

    .theme-signin .btn {width:auto; font-size:12px ;padding:5px 15px ;border-radius:0;}

    .btn.close {display:block;float: left;position: static;}

    i.buy-event{display: inline-block;}

    .btn.confirm { float: right; }


    .buy-nav .buy-nav-opt { position: absolute; margin-left: 283px; display: block; }

    .buy-nav .buy-nav-opt a { display: none; }

    .buy-nav .buy-nav-opt .favor-submit { width: 100%; border: 0; margin-top: 5px; }

/*详情*/

.detail-content img { width: 90%; height: auto; }

}


@media only screen and (min-width:1025px) {

    i.buy-event{display: none;}  

    .theme-signin-left{padding-top:15px ;float: left;max-width:none;padding-bottom:0px ;}

    .theme-signin-right{float: left;display:block;overflow: hidden;padding: 10px;}

    .theme-signin-right .img-info,.theme-signin-right .text-info{position: static;}

    .theme-signin-right .img-info img{width:120px;height:120px; }

}


dt + dd {

margin:0px 0px;padding:0px 0px;

}

.am-selected-text{font-size:14px ;}

ul,li,ol{ list-style:none;}

dl,dd{ margin:auto;}

img{ border:none;}

button {

    padding: 1px 6px;

}

li{ list-style:none;}


a img,:link img,:visited img { border: none; }

table { border-collapse: collapse; border-spacing: 0; font-size: 14px;}

:focus { outline: none; }

*{margin:0;padding:0;}


fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}

fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}

.introduce-main .am-nav > li > a{padding:4px 0px;font-size: 12px;}

.introduce-main .am-nav-tabs > li > a { margin-right:0px;}

.introduce-main .am-nav-tabs > li {border-top: 1px solid rgba(255,255,255,.3);}

.introduce-main .am-nav-tabs > li.am-active {  border-bottom: 1px solid rgba(144,174,252,.3); }


/*导航*/

.introduce ul.am-tabs-nav.am-nav.am-nav-tabs {background: rgba(255,255,255,.3);}

.introduce .am-nav-tabs, .introduce .am-tabs-bd{border-color:transparent ;}

.introduce .am-nav-tabs > li.am-active > a,

.introduce .am-nav-tabs > li.am-active > a:hover,

.introduce .am-nav-tabs > li.am-active > a:focus,

.introduce .am-nav-tabs > li > a:hover,

.introduce .am-nav-tabs > li > a:focus { color: #555555;background:none;border-color:transparent;cursor: default;}

.introduce .am-nav-tabs > li{border-bottom:2px solid  transparent;text-align: center;}

.introduce .am-nav-tabs > li.am-active {border-bottom:none;}

.introduce .am-tabs-nav li {height:36px;font-size:14px;line-height:36px ;}

.introduce .am-tabs-nav li a,

.introduce .am-tabs-nav li.am-active a,

.introduce .am-tabs-nav li{cursor: pointer;}

.introduce .am-nav-tabs > li span{font-size:14px;font-weight:500;}

.introduce .am-nav-tabs > li.am-active span{color: #f00;}



/*tab*/

.tab{ line-height:56px; font-size:12px;}

.tab a{ color:#07c;}

.tab a:hover{ color:#c00;}

.tab a.cur{ font-weight:bold;}


/*商品详细页*/

.simple-desc { color: #f00; }

.tb-detail-hd h1, .simple-desc { word-break: break-all; }


/*原价格,销售受价格栏*/

.tb-detail-price{text-align: left; position: relative;}

.tb-detail-price .price em {font-family: arial;}

.tb-detail-price .original-price-value {text-decoration:line-through; font-size:14px; color: #666; }

.iteminfo_mktprice {padding-top: 10px;}

.iteminfo_mktprice em, .goods-price { color:#ff0000;}

.tb-detail-price dd {display: inline-block;}

.goods-favor-count { color: #333; }

.iteminfo_parameter a:hover{text-decoration: none;color:initial ;}

.tm-indcon .tm-label, .tb-detail-price dt, .specpara-title { white-space:nowrap; color:#333; font-weight: 400; }

.tb-detail-price{ background: rgba(255,255,255,.2) ; padding:10px; }

.tb-detail-price .items {display: block; margin: 5px 0;}

.tb-detail-price .items dt { float:left; text-align: left;}

.tb-detail-price .goods-price {font-size: 24px;font-weight: bold; line-height: 16px;}


/* 二维码 */

.goods-qrcode{position: absolute; bottom: 5px; right: 10px; cursor: pointer; color: #666; width: 150px; text-align: right;}

.goods-qrcode .qrcode-images{display: none; position: absolute; z-index: 2; top: 30px; right: 0;}

.goods-qrcode:hover .qrcode-images{display: block;}


/* 视频 */

.goods-video-submit-start,

.goods-video-submit-close,

.goods-video-container { position: absolute; }

.goods-video-submit-start,

.goods-video-submit-close { font-size: 34px; color: rgba(144, 174, 252,.5); cursor: pointer; }

.goods-video-submit-start:hover,

.goods-video-submit-close:hover { color: rgba(209, 190, 190, .6); }

.goods-video-submit-close { z-index: 4; width: 30px; height: 30px; line-height: 22px; text-align: center; padding: 0; border: 2px solid rgba(144, 174, 252, .3); border-radius: 1000px; }


/* 视频 放大镜 */

.box .goods-video-submit-start { left: 1px; bottom: 85px; z-index: 2; padding: 10px 10px 2px 10px; }

.box .goods-video-container { line-height: 32px; font-size: 32px; color: #D98A8A; background:rgba(255,255,255,.3); text-align: center; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; }


/* 视频 轮播下 */

.scoll .slider-content { overflow: hidden; position: relative; }

.scoll .goods-video-submit-start { left: 0; bottom: 0; z-index: 2; padding: 10px 10px 5px 10px; }

.scoll .goods-video-submit-close { right: 10px; }

.scoll .goods-video-container { line-height: 32px; font-size: 32px; color: #D98A8A; background: rgba(255,255,255,.3); text-align: center; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; }


/*销量*/

.tm-ind-panel, .iteminfo_parameter { border-bottom: 1px solid rgba(255,255,255,.3); }

.tm-ind-panel {padding: 10px 5px;position: relative;overflow: hidden;clear: both;display: flex;background: rgba(255,255,255,.3);}    

.tm-ind-item {float: left;width: 33%;text-align: center;position: relative;left: -1px;border-left: 1px solid #E5DFDA;

flex: 1 1 0%;line-height: 16px;cursor: pointer;}   

.tm-ind-panel .tm-count {display: inline-block;line-height: 16px;height: 16px;color: #ff0000;font-weight: 700;margin-left: 3px;} 


/*规格*/

.theme-signin .btn-op.act{display: none;}

.theme-signin .btn-op.act .btn{width:50%;float: left;}

.buy-event .cart-title{ width:100%;padding:5px;}

.buy-event .cart-title .am-icon-angle-right{float: right; }


/*数量*/

.iteminfo_parameter.munber,.iteminfo_parameter.freight{display:none ;}

.iteminfo_parameter.munber dd{margin-left:5px ;}

#min, #add{ width: 35px; height: 25px; outline:none; line-height: 23px; padding: 0; cursor: pointer; }

#text_box { width: 60px; height: 25px; text-align: center; font-size: 12px !important;color: #666; }

.theme-popover .am-input-group { display: inline-flex; }



/*购物车*/

.tb-btn button, .buy-nav div.submit,.buy-nav .buy-nav-opt, .buy-nav .nav-icon { height: 35px; line-height: 20px; }

.tb-btn button {margin-right: 0px;float: left;overflow: hidden; position: relative;width:100%; background-color: rgba(255,204,255,.3); color:#ff0000;font-size: 14px;text-align: center; border-radius:3px;}

.tb-btn-basket button {background-color:rgba(144,174,252,.3);color: #fff; border-radius:3px;}

.buy-nav .buy-nav-opt, .buy-nav div.submit { float:left; }

.buy-nav div.submit { width: 30%; }


@media only screen and (min-width:640px) {

.box .goods-video-submit-close { top: 10px; right: 10px; }

    .buy-nav .buy-nav-opt { position: absolute; margin-left: 220px; display: block; }

    .buy-nav .buy-nav-opt .nav-icon-home { display: none; }

    .buy-nav .buy-nav-opt .nav-icon { cursor: pointer; }

    .buy-nav .buy-nav-opt .nav-icon:not(:last-child) { margin-right: 10px; }

    .buy-nav .buy-nav-opt { padding-top: 8px; }

.lei1{margin-left: 50px;}

}

@media only screen and (max-width:640px) {

/* 购买导航 */

.tb-btn button, .buy-nav div.submit,.buy-nav .buy-nav-opt, .buy-nav .nav-icon { height: 40px; line-height: 40px; }

.buy-nav {  background: rgba(255,255,255,.6); height: 40px}

    .buy-nav .nav-icon {display:inline-block;width: 50%;float: left; ;cursor: pointer;text-align: center; }

    header { display: none; }

.buy-nav { position: fixed; bottom: 0px; right: 0px; z-index: 1000; width: 100%; background: rgba(255,255,255,.6); }

}



/*介绍*/

.introduce{width:100%;margin: 0px auto;text-align: center;padding-bottom: 20px;}

.introduce-main{width:100%;background:rgba(255,255,255,.2);}

.introduce-main .am-tab-panel { padding: 0px; }



/*产品参数*/

ul.detail-attr{overflow: hidden;text-align: left;}

ul.detail-attr li {height: 26px;overflow: hidden;line-height: 26px;vertical-align: top;white-space: nowrap; text-overflow: ellipsis;color: #666;font-size:14px;}


/*推荐商品*/

.like{margin-top:10px;border-radius:4px;}

.like li{ float:left; font: 14px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif;}

.like li{ text-align:left; float: left; background: rgba(255, 255, 252,1);margin:4px; border-radius:12px;overflow: hidden;position: relative;cursor: pointer;padding-bottom:10px; } 

.like li .p-price strong { font-size: 14px; color: #C2C9FD;font-weight: 400;font-family: Verdana;}

.like li img{width:100%;border-radius:8px 8px 0 0;padding-bottom:10px;}

.like li {-webkit-box-shadow: 0px 2px 3px #aaa;-moz-box-shadow: 0px 2px 3px #aaa; box-shadow: 0px 2px 3px #aaa;}


/*轮播*/

.clearfix-left{ position: relative;}

.scoll img{width:100%; margin-left:0}


/* 文字提示 */

.goods-not-buy-tips { color: #FF5722; margin: 5px 0; font-size: 14px; }


/*左侧商品-看了又看*/

.browse { display: none; }


@media only screen and (min-width:640px) {

    /*导航固定*/

    ul.am-tabs-nav.am-nav.am-nav-tabs {margin-right:10px ;margin-left: 10px;width: auto;}

    .scoll{float: left;width: calc(45% - 10px);max-width:360px;padding-right:20px; }

    .scoll .slider-content { border: 1px solid #d4d9fe; }

    .clearfix-right{float:left;width:55%;min-height: 270px;}

    .iteminfo_parameter.freight{display: block;margin-top: 10px;margin-bottom:10px ;}

    .iteminfo_parameter.freight dt{margin-left:-70px ;float: left;margin-right:10px ;padding-top:5px ;padding-bottom:20px ;}

    .buy-nav{position: static; margin-top: 20px; overflow: hidden; }

    ul.am-avg-sm-4.am-tabs-nav.am-nav.am-nav-tabs {width: auto;}

    ul.detail-attr li {display: inline;float: left;width: 33.33%;}


    /*可选规格*/

    .buy-event .cart-title{border:none ;margin-left: -60px;position: relative;padding:10px 0px 5px 10px ;}

    .buy-event .cart-title .am-icon-angle-right {position: absolute;right: -50px;}

    .iteminfo_parameter { border-bottom: 0; }


    /*销量*/

    .tm-ind-panel {border-width:1px 0px;margin: -1px 0px 0px 0px;padding: 10px 0px;

    position: relative;overflow: hidden;clear: both;display: flex;}    

    .tm-ind-item {float: left;width: 33%;text-align: center;position: relative;left: -1px;border-left: 1px solid #E5DFDA;

    flex: 1 1 0%;line-height: 16px;cursor: pointer;}   

    .tm-ind-panel .tm-count {display: inline-block;line-height: 16px;height: 16px;color: #ff0000;font-weight: 700;margin-left: 3px;}    


    /*基础*/

    .tb-detail-price .items dt { min-width: 65px; }

    .theme-signin-left{float:none;padding-bottom:0;margin:0 ;}

    .iteminfo_parameter {padding-left: 50px;}

    .tb-detail-hd,.tb-detail-price{text-align: left;}

    .tb-detail-hd h1 {font-size: 16px;}


    /*购物*/

    .tb-btn-buy{ margin-left:50px; margin-right:10px;}

    .tb-btn button{width:98px ;border: 1px solid rgba(212,217,254,.3);}

    .buy-nav div.submit{width: auto;}


    /*印象*/

    .p-bfc {padding: 0px ; }

    .rate {float: left;padding-top:20px ;display: block;margin-right: 30px;}

    .rate strong {font: 400 46px/30px arial;color: #F51701;}


    /* 推荐商品 */

    .like li:not(:nth-of-type(3n)) { border-right: 1px solid #eee; }

    .like li:nth-child(1), .like li:nth-child(2), .like li:nth-child(3) { border-top: 0px; }


    /* 视频 */

    .scoll .goods-video-submit-close { top:20px; }


    /* 基础主体 */

    .item-inform { margin-bottom: 10px; }

/*logo返回按钮*/

.zhuye{display: none;}

}


@media only screen and (min-width:1025px) {

.min1025{display: none;}

    /*放大镜*/

    /*图片轮播框图片*/

    .box { position: relative; border: 1px solid #eee; }

    .tb-pic a { display:table-cell; text-align:center; vertical-align:middle; }

    .tb-pic a img {vertical-align:middle; }

    .tb-pic a {*display:block;*font-family:Arial;*line-height:1;}

    .tb-thumb { padding: 5px; overflow: hidden; background: rgba(255,255,255,.3); }

    .tb-thumb li {background:none repeat scroll 0 0 transparent; float:left; margin:0 6px 0 0; overflow:hidden; padding:1px; }


    .tb-s310 a { *font-size:271px;}

    .tb-s40 a { *font-size:35px;}

    .tb-s40{ height:60px; width:53px; }

    .tb-booth { border-bottom:1px solid #f5f5f5; position:relative; z-index:1;overflow: hidden; height: 358px; }

    .tb-booth img { height: 100%; margin: 0 auto; display: block;width: 100%;}

    .tb-thumb .tb-selected { background:none repeat scroll 0 0 #B19191; height:62px;}

    .tb-thumb .tb-selected div { background-color:#FFFFFF; border:medium none; }

    .tb-thumb li div { border:1px solid #eee; overflow: hidden;}

    div.zoomDiv { z-index:999; position:absolute; top:0px; left:0px; width:400px; height:400px; background: rgba(255,255,255,.3); border:1px solid #CCCCCC; display:none; text-align:center; overflow:hidden; }

    div.zoomDiv img { min-width: 1000px; display: block; }

    div.zoomMask { position:absolute; background:url(../images/goods-mask.png)repeat scroll 0 0 rgba(33, 150, 243, 0.3); cursor:move; z-index:1; }

            

    /*规格*/

    .theme-popover {display: block;position: static;border:none ;box-shadow: none;width: 100%;}

    .theme-poptit,.theme-signin-right,.iteminfo_parameter dt.buy-event,.btn-op{display: none;}


    .theme-options{overflow: visible;padding:0px 0px; margin-bottom: 5px;}

    .theme-options ul{overflow: hidden;float: none;}

    .theme-signin-left {max-width:100%;margin-bottom: 0;}

    .theme-signin-left .sku-line{cursor: pointer; }

    .theme-signin-left .cart-title{margin-left: -46px;font-size:12px ;font-weight: 100;color:#333 ;float: left;}

        

    .scoll{display: none;}

    .item-inform{max-width:1000px; background: rgba(255,255,255,.3); margin-top: 20px; margin-bottom: 30px; }

    .clearfix-left{display:block;float: left;width:360px;}

    .clearfix-right{width:calc(100% - 370px);margin-left:10px;}

    .freight{width:400px;float: left;}

    .iteminfo_parameter.freight dt{padding-top:6px ;padding-bottom:0px ;}


    /*左侧商品-看了又看*/

    .introduce-main{width:80%;float:left;background: rgba(255,255,255,.3);}

    .browse{display:block; float:left;width:20% ;}

    .browse ul{border:1px solid #eee ;width: 90%;background:rgba(255,255,255,.3);}

    .browse ul .mt{background-color: rgba(255,255,255,.3); height: 35px;line-height: 35px;text-align: center;}

    .browse ul li {margin:6px 10px; background: rgba(255, 255, 252,1); border-radius:10px;}

    .browse ul li.first {border-top:none;}

    .browse li img{width:100% ;border-radius:8px 8px 0 0;}

    .browse li .p-price strong {color: #ff0000;font-weight: 600;}

    /*导航固定*/

    ul.am-tabs-nav.am-nav.am-nav-tabs {left:20% ;max-width:960px ;margin-right: 0px;margin-left: 0px;}

    .introduce-main .am-nav-tabs > li.am-active {border-bottom: none;}

    .introduce-main .am-nav-tabs > li.am-active {border-top: 1px solid rgba(144,174,252,.2);}


    /*评论*/

    .tb-r-filter-bar{background-color: rgba(255,255,255,.2);}

    .tb-r-filter-bar li {text-align:left;width:auto ;padding:0px 10px;}


    /* 电脑推荐商品 */

    .like li:nth-of-type(4n) { border-right: 0px !important; }

    .like li:nth-child(4) { border-top: 0px; }

.like li{  width: 24%;}

    .like li:hover {  border: 1px solid rgba(233,134,188,.2);}

    /*购物*/

    .tb-btn-buy{margin-left:50px;margin-right:20px;}

    .buy-nav .buy-nav-opt {margin-left: 283px;}

    .buy-nav .buy-nav-opt .nav-icon:not(:last-child) {margin-right: 15px;}

}


@media only screen and (min-width:1260px) {

    .item-inform ,.match,.introduce-main,.am-breadcrumb-slash{max-width: 1200px;}

    .clearfix-left { width: 340px; }

    .tb-booth { height: 430px; }

    /*放大镜*/

.scoll .goods-video-container { line-height: 32px; font-size: 32px; color: #D98A8A; background: rgba(255,255,255,.3); text-align: center; width: 100%; height: 86%; top: 0; left: 0; z-index: 3; }

    .clearfix-right {width: calc(100% - 420px);margin-left:20px;}


    /* 视频 */

.box .goods-video-submit-start{ bottom:86px;}

    .box .goods-video-submit-close { left: 250px; }


    /*导航固定*/

    ul.am-tabs-nav.am-nav.am-nav-tabs {left:auto;right:auto;width:960px ;}

}



/* 小于1025 */

@media only screen and (max-width:1025px) {

   ul.am-tabs-nav.am-nav.am-nav-tabs { width:100% !important; left: 0px !important; }

    .goods-detail { padding: 10px; }

.like li{width: 32.2%;}

.ma1025{display: none;}

}


/* 手机模式下 */

@media only screen and (max-width:640px) {

    .goods-detail { padding: 0px; }

    .detail-title, .detail-attr, .simple-desc { padding: 0px 5px; }

    .tb-detail-price { padding: 10px 5px; }

    .buy-nav .buy-nav-opt { width: 40%; }

    ul.tm-ind-panel li { border-left: 0px; }

    ul.tm-ind-panel li:first-child { text-align: left; }

    ul.tm-ind-panel li:last-child { text-align: right; }

    .tb-detail-price .items dt { margin-right: 10px; }

    .tb-detail-hd h1 { font-size: 14px; }


    /* 推荐商品 */

    .like li {  width: 47%; border-radius:8px;}

    .goods-not-buy-tips { text-align: center; }

    .goods-favor-count { display: none; }

/*购物车*/

.tb-btn button, .buy-nav div.submit,.buy-nav .buy-nav-opt, .buy-nav span { height: 38px; line-height: 30px; }

.tb-btn button {margin-right: 0px;float: left;overflow: hidden; position: relative;width:100%; background: rgba(255,204,255,.3); color:#f00;text-align: center; border-radius:0px;border:none;}

.tb-btn-basket button {background:rgba(144,174,252,.3);color: #fff; border-radius:0px;border:none;}

.buy-nav .buy-nav-opt, .buy-nav div.submit { float:left; }

.buy-nav div.submit { width: 30%; }

.buy-nav span{display:inline-block;width: 50%;float: left;cursor: pointer;}


 

    /* 视频操作 */

    .box .goods-video-submit-close { bottom: 65px; right: 10px; }


    /* 商品评论 */

    .goods-comment .am-comment { margin-left: 5px; margin-right: 5px; }


    /* 商品评分 */

    .score-container { padding: 10px; border-style: none none solid none; }

    .score-container .score { padding-right: 10px; }

    .score-container .am-progress { width: calc(100% - 90px); }


    /* 底部 */

    .am-footer { padding-bottom: 35px; }

/*logo返回按钮*/

.zhuye{height: 30px;width: 30px; position:fixed; z-index: 999;margin-top: 42px;margin-left: 20px;border-radius:50%;background: rgba(0,0,0,.4);}

.zhuye img {position: center;padding: 2px;}

}


  • 发表于 2020-10-19 16:51
  • 阅读 ( 173 )
  • 分类:经验交流

0 条评论

请先 登录 后评论
wujian
wujian

9 篇文章

作家榜 »

  1. admin 64 文章
  2. 穆尹飞 23 文章
  3. 蝈蝈 10 文章
  4. wujian 9 文章
  5. Alan Leung 5 文章
  6. 风车车 4 文章
  7. BMCTeam 3 文章
  8. 陈强 3 文章