Merge branch 'master' of F:\myProjects\mall-web-ssr with conflicts.

pages/register-saler/index.vue

@@ -1,14 +1,757 @@
 <template>
-<div>
-  <h1>啊啊啊啊啊</h1>
-</div>
+  <div class="container vendor_store_apply">
+    <div>
+      <!-- Nav tabs -->
+      <ul class="nav nav-tabs">
+        <li><div style="height: 39px;line-height: 39px;font-size: 14px;">店铺类型：</div></li>
+        <li class="custom_tab" :class="{active: tab == 'ORIGINAL_FACTORY'}" @click="toggleTab('ORIGINAL_FACTORY')">
+          <a href="javascript:void(0)">原厂</a>
+        </li>
+        <li class="custom_tab" :class="{active: tab == 'AGENCY'}" @click="toggleTab('AGENCY')">
+          <a href="javascript:void(0)">代理商</a>
+        </li>
+        <li class="custom_tab" :class="{active: tab == 'DISTRIBUTION'}" @click="toggleTab('DISTRIBUTION')">
+          <a href="javascript:void(0)">经销商</a>
+        </li>
+      </ul>
+      <!-- Tab panes -->
+      <div class="tab-content" style="border: 1px #5078CB solid; padding-bottom: 30px;">
+        <!-- 原厂 -->
+        <div role="tabpanel" class="tab-pane" v-if="tab == 'ORIGINAL_FACTORY'" :class="{active: tab == 'ORIGINAL_FACTORY'}">
+          <div class="row com_row">
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img :src="qualifications.url==''?'images/all/upload-apply.png':qualifications.url" class="previewImage"/>
+                    <input type="file" v-if="!qualifications.url" class="com-input" @change="update" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf" />
+                  </div>
+                  <div class="hover-show" v-if="qualifications.url">
+                    <span class="delete" title="删除" @click="deleteImg(qualifications.url)"><i class="fa fa-trash"></i></span>
+                    <a @click="showImg(qualifications.url)"><i class="fa fa-search"></i>查看</a>
+                  </div>
+                  <!--上传是的PDF图片-->
+                  <!--<div v-if="qualifications.isPdf">-->
+                    <!--<div class="preview">-->
+                      <!--<img src="images/all/timg.png" />-->
+                    <!--</div>-->
+                  <!--</div>-->
+                  <!--查看大图 begin-->
+                  <div id="image-box" v-if="isShow">
+                    <div class="x-floating-wrap"></div>
+                    <div class="x-floating">
+                      <div id="item-content">
+                        <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
+                        <div class="img"><img :src="qualifications.url"/></div>
+                      </div>
+                    </div>
+                  </div>
+                  <!--查看大图 end-->
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">营业执照<em style="color: #FF0000;">*</em></span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">纳税人证明</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">税务登记证</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-12"><em>* </em>如已上传最新版营业执照（三证合一），则其他两证无需上传 ； 仅支持JPG、PNG、GIF、PDF格式，每张大小不超过3M</div>
+          </div>
+          <!--增加品牌-->
+          <div class="brand-type row">
+            <div class="col-md-1">品牌1<em>*</em></div>
+            <div class="col-md-7">
+              <input type="text" class="form-control" name="brandName"  autocomplete="off" placeholder="请输入英文品牌或中文品牌，如：松下; panasonic等"/>
+            </div>
+            <div class="brand-small-upload col-md-4">
+              <div class="brand-small-img">
+                <div class="preview ">
+                  <img src="images/all/upload-apply.png"  class="previewImage"/>
+                </div>
+                <div class="hover-show">
+                  <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                  <a><i class="fa fa-search"></i>查看</a>
+                </div>
+              </div>
+              <div class="file-text">品牌logo/商标注册原件/授权说明书</div>
+              <div class="delete" title="删除"><i class="fa fa-trash"></i></div>
+              <div class="col-md-12"> <em>*</em>仅支持JPG、PNG、GIF、PDF格式，大小不超过3M</div>
+            </div>
+          </div>
+          <div class="add-brand row">
+            <a href="javascript:void(0)" title="增加品牌" ng-click="addBrand()"><em><i class="fa fa-plus-circle"></i>增加品牌</em></a>
+          </div>
+          <div class="unpass-reason row" style="display: none">
+            原因：<span style="color: #d32526;">原因</span>
+          </div>
+        </div>
+        <!--原厂end-->
+        <!--代理商 begin-->
+        <div role="tabpanel" class="tab-pane" v-if="tab == 'AGENCY'" :class="{active: tab == 'AGENCY'}">
+          <div class="row com_row">
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">营业执照<em style="color: #FF0000;">*</em></span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">纳税人证明</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">税务登记证</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-12"><em>* </em>如已上传最新版营业执照（三证合一），则其他两证无需上传 ； 仅支持JPG、PNG、GIF、PDF格式，每张大小不超过3M</div>
+          </div>
+          <!--增加品牌-->
+          <div class="brand-type row">
+            <div class="col-md-1">品牌1<em>*</em></div>
+            <div class="col-md-7">
+              <input type="text" class="form-control" name="brandName"  autocomplete="off" placeholder="请输入英文品牌或中文品牌，如：松下; panasonic等"/>
+            </div>
+            <div class="brand-small-upload col-md-4">
+              <div class="brand-small-img">
+                <div class="preview ">
+                  <img src="images/all/upload-apply.png"  class="previewImage"/>
+                </div>
+                <div class="hover-show">
+                  <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                  <a><i class="fa fa-search"></i>查看</a>
+                </div>
+              </div>
+              <div class="file-text">代理资格证/代理授权书</div>
+              <div class="delete" title="删除"><i class="fa fa-trash"></i></div>
+              <div class="col-md-12"> <em>*</em>仅支持JPG、PNG、GIF、PDF格式，大小不超过3M</div>
+            </div>
+          </div>
+          <div class="add-brand row">
+            <a href="javascript:void(0)" title="增加品牌" ng-click="addBrand()"><em><i class="fa fa-plus-circle"></i>增加品牌</em></a>
+          </div>
+          <div class="unpass-reason row" style="display: none">
+            原因：<span style="color: #d32526;">原因</span>
+          </div>
+        </div>
+        <!--代理商 end-->
+        <!--经销商 begin-->
+        <div role="tabpanel" class="tab-pane" v-if="tab == 'DISTRIBUTION'" :class="{active: tab == 'DISTRIBUTION'}">
+          <div class="row com_row">
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">营业执照<em style="color: #FF0000;">*</em></span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">纳税人证明</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4 custom_col">
+              <div class="row" style="margin: 0;">
+                <div class="col-md-5 col-md-offset-1 show_image_area show_image">
+                  <div class="preview">
+                    <img src="images/all/upload-apply.png" class="previewImage"/>
+                  </div>
+                  <div class="hover-show">
+                    <span class="delete" title="删除"><i class="fa fa-trash"></i></span>
+                    <a><i class="fa fa-search"></i>查看</a>
+                  </div>
+                </div>
+                <div class="col-md-5" style="padding: 0;">
+                  <span style="margin-top: 50%;padding-right: 20px;">税务登记证</span>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-12"><em>* </em>如已上传最新版营业执照（三证合一），则其他两证无需上传 ； 仅支持JPG、PNG、GIF、PDF格式，每张大小不超过3M</div>
+          </div>
+        </div>
+        <!--经销商 end-->
+      </div>
+      <!-- Submit button -->
+      <div style="padding: 28px 40px;">
+        <button type="button" class="btn btn-primary" style="float: right">提交申请</button>
+        <div class="clear-fix"></div>
+      </div>
+    </div>
+    <!--删除上传图片-->
+    <div class="com-del-box" style="display: none">
+      <div class="title">
+        <a><i class="fa fa-close fa-lg"></i></a>
+      </div>
+      <div class="content">
+        <p><i class="fa fa-exclamation-circle"></i>是否删除选中信息</p>
+        <div><a>取消</a><a>确认</a></div>
+      </div>
+    </div>
+    <!--删除品牌图片-->
+    <div class="com-del-box" style="display: none">
+      <div class="title">
+        <a><i class="fa fa-close fa-lg"></i></a>
+      </div>
+      <div class="content">
+        <p><i class="fa fa-exclamation-circle"></i>品牌信息为重要信息，确定删除吗？</p>
+        <div><a>取消</a><a>确认</a></div>
+      </div>
+    </div>
+    <!--提示框-->
+    <div class="com-del-box" style="display: none;">
+      <div class="title">
+        <a><i class="fa fa-close fa-lg"></i></a>
+      </div>
+      <div class="content">
+        <p style="line-height: 20px;margin-top: 10px;">非常抱歉，目前暂无此品牌！您可在<br/>“品牌申请”中，提出申请。</p>
+        <p style="line-height: 20px;">前往<a style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>
+      </div>
+    </div>
+  </div>
 </template>
-
 <script>
+//  function isPdf (path) {
+//    // 根据path文件名来判断文件是否是PDF文件
+//    if (path) {
+//      let str = path.slice(path.lastIndexOf('.')).toLowerCase()
+//      if (str === '.pdf') {
+//        return true
+//      } else {
+//        return false
+//      }
+//    } else {
+//      return false
+//    }
+//  }
   export default {
+    name: 'index',
+    data () {
+      return {
+        tab: 'ORIGINAL_FACTORY',
+        qualifications: {
+          url: ''
+        },
+        isShow: false
+      }
+    },
+    methods: {
+      toggleTab (t) {
+        this.tab = t
+      },
+      update (e) {
+        let file = e.target.files[0]
+        let param = new FormData()
+        param.append('file', file, file.name)
+        param.append('chunk', '0')
+        console.log(param.get('file'))
+        let config = {
+          headers: {'Content-Type': 'multipart/form-data'}
+        }
+        this.$http.post('/api/images', param, config)
+          .then(response => {
+            this.qualifications.url = response.data[0].path
+          })
+      },
+      showImg (imgUrl) {
+        this.qualifications.url = imgUrl
+        this.isShow = true
+      },
+      deleteImg () {
+        this.qualifications.url = ''
+      }
+    }
   }
 </script>
-
 <style>
+  .com-input{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    display: inline-block !important;
+  }
+  .el-upload-list--picture-card .el-upload-list__item{
+    width: 160px;
+    height: 120px;
+    top: 69px;
+  }
+  div.vendor_store_apply {
+    margin: 0 auto;
+    width: 1026px;
+    background-color: #FFFFFF;
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+
+  div.vendor_store_apply .com_row {
+    padding: 0 40px;
+    min-height: 40px;
+  }
+
+  div.vendor_store_apply .title_row {
+    margin-bottom: 20px;
+    border-bottom: #e8e8e8 1px solid;
+  }
+
+  div.vendor_store_apply .custom_col {
+    margin: 0;
+    padding: 0;
+  }
+
+  div.vendor_store_apply .custom_col img.previewImage {
+    max-width: 160px;
+    max-height: 120px;
+    cursor: pointer;
+    /*padding: 0 30px;*/
+  }
+
+  div.vendor_store_apply .row h2 {
+    padding: 10px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  div.vendor_store_apply .row span {
+    display: block;
+    padding: 10px 0;
+    font-size: 14px;
+    color: #000000;
+  }
+
+  div.vendor_store_apply #file_upload {
+    width: 100px;
+    height: 100px;
+    border:1px solid #CDCDCD;
+    /*background: url("static/img/vendor/images/upload.png");*/
+  }
+
+  div.vendor_store_apply #upload_qualification {
+    width: 100px;
+    height: 100px;
+    opacity: 0;
+  }
+
+  div.vendor_store_apply .custom_tab {
+    margin: 0 15px;
+    width: 90px;
+    text-align: center;
+  }
+
+  div.vendor_store_apply .nav li.custom_tab.active>a,
+  div.vendor_store_apply .nav li.custom_tab.active>a:focus,
+  div.vendor_store_apply .nav li.custom_tab.active>a:hover {
+    border: 1px solid #5078CB;
+    border-bottom-color: transparent;
+    color: #5078cb;
+  }
+
+  div.vendor_store_apply .uploadify-button {
+    display: block;
+  }
+
+  div.vendor_store_apply .custom_col .show_image_area {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .nav-tabs{
+    height: 41px;
+    background: none;
+    padding: 0 40px;
+  }
+  .nav-tabs>li>a{
+    border-radius: 0;
+    color: #333;
+  }
+  div.vendor_store_apply .btn-primary{
+    background: #5078cb;
+    border-radius: 0;
+  }
+  div.vendor_store_apply .btn-primary:hover{
+    background: #3f7ae3;
+  }
+  div.vendor_store_apply .com_row .col-md-2{
+    width: 120px;
+  }
+  div.vendor_store_apply .com_row .col-md-10 span{
+    color: #666;
+  }
 
+  /*修改的样式*/
+  div.vendor_store_apply .custom_col .show_image_area{
+    position: relative;
+    overflow: hidden;
+  }
+  .hover-show{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 120px;
+    left: 0;
+    background: rgba(0,0,0,.5);
+  }
+  div.vendor_store_apply .custom_col .show_image_area .hover-show{
+    top: 0;
+  }
+  .hover-show .delete{
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    float: right;
+    text-align: center;
+  }
+  .hover-show .delete:hover{
+    cursor: pointer;
+  }
+  .hover-show .delete i{
+    color: #fff;
+    font-size: 18px;
+  }
+  .hover-show a{
+    display: inline-block;
+    width: 100%;
+    height: 60px;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+    line-height: 60px;
+  }
+  .hover-show a i{
+    margin-right: 5px;
+    font-size: 16px;
+  }
+  .brand-type{
+    line-height: 34px;
+    font-size: 14px;
+    margin: 20px 20px 5px 20px;
+  }
+  .brand-type .brand-small-img{
+    position: relative;
+    width: 84px;
+    height: 84px;
+    overflow: hidden;
+    text-align: center;
+    border: #e8e8e8 1px solid;
+  }
+  .brand-type .brand-small-img .preview img{
+    max-width: 84px;
+    max-height: 84px;
+  }
+  .brand-type em{
+    color: #ff0000;
+  }
+  .brand-type .col-md-7,.brand-type .col-md-1{
+    margin-top: 25px;
+  }
+  .brand-small-upload .file-text,.brand-type .brand-small-img{
+    float: left;
+  }
+  .brand-small-upload .file-text{
+    width: 120px;
+    margin-left: 10px;
+    line-height: 20px;
+    margin-top: 6%;
+  }
+  .brand-small-upload .delete{
+    float: right;
+    text-align: center;
+    line-height: 84px;
+  }
+  .brand-small-upload .delete i{
+    font-size: 18px;
+    color: #5078cb;
+  }
+  .brand-small-upload .delete:hover{
+    cursor: pointer;
+  }
+  .brand-small-upload .delete:hover i{
+    color: #f00;
+  }
+  .brand-small-upload .brand-small-img .hover-show{
+    top: 0;
+  }
+  .brand-small-upload .brand-small-img .hover-show{
+  }
+  .brand-small-upload .brand-small-img .hover-show span i{
+    color: #fff;
+  }
+  .brand-small-upload .brand-small-img .hover-show span.delete{
+    line-height: 30px;
+    padding: 0;
+  }
+  .brand-small-upload .brand-small-img .hover-show a{
+    line-height: 30px;
+    height: 30px;
+  }
+  .tab-content .com_row{
+    margin:40px 0 0;
+    border-bottom: #ccc 1px dashed;
+    padding-bottom: 40px !important;
+  }
+  .tab-content .com_row .col-md-12{
+    color: #999;
+    margin-top: 20px;
+    font-size: 12px;
+    padding-left: 50px;
+  }
+  .brand-small-upload .col-md-12{
+    color: #999;
+    font-size: 12px;
+    padding-left: 0;
+  }
+  .tab-content .com_row .col-md-12 em,.brand-small-upload .col-md-12 em{
+    color: #f00;
+  }
+  .add-brand{
+    text-align: center;
+    border-bottom: #ccc 1px dashed;
+    margin: 0 0 20px 0;
+    height: 34px;
+  }
+  .add-brand a{
+    font-size: 14px;
+    color: #5078cb;
+    width: 200px;
+    height: 15px;
+    display: inline-block;
+    border: #ccc 1px dashed;
+    border-top: 0;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    margin-top: 31px;
+    background: #fff;
+    line-height: 15px;
+    text-decoration: none;
+  }
+  .add-brand a i{
+    margin-right: 5px;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+  .add-brand a em{
+    position: relative;
+    top: -10px;
+    font-weight: bold;
+    font-style: inherit;
+  }
+  .add-brand a:hover em, .add-brand a:active em, .add-brand a:focus em{
+    color: #d32526;
+    text-decoration: none;
+  }
+  .unpass-reason {
+    margin: 0 40px;
+    line-height: 34px;
+  }
+
+  /* 预览框 end */
+
+  .brand-type .dropdown-menu {
+    width: 95%;
+  }
+  .brand-type .dropdown-menu li {
+    font-size: 14px;
+  }
+  .com-del-box{
+    position: fixed;
+    z-index: 2;
+    height: 152px;
+    opacity: 1;
+    background-color: white;
+    width: 310px;
+    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    margin: -155px 0 0 -75px;
+    top: 55%;
+    left: 50%;
+  }
+  .com-del-box .title{
+    height: 30px;
+    background-color: #5078cb;
+    text-align: right;
+    padding-right: 15px;
+    line-height: 30px;
+  }
+  .com-del-box .title a{
+    color: white;
+    font-size: 16px;
+  }
+  .com-del-box .content{
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .com-del-box .content p{
+    line-height: 50px;
+    font-size: 14px;
+    padding-top: 10px;
+  }
+  .com-del-box .content p i{
+    color: #5078cb;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  .com-del-box .content div{
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .com-del-box .content div a{
+    width: 55px;
+    height: 26px;
+    line-height: 26px;
+    display: inline-block;
+    text-align: center;
+    font-size: 14px;
+  }
+  .com-del-box .content div a:first-child{
+    background: #b4b5b9;
+    color: #333;
+    margin-right: 10px;
+  }
+  .com-del-box .content div a:last-child{
+    background: #5078cb;
+    color: #fff;
+  }
+  .com-del-box .content div a:hover{
+    background: #3f7ae3;
+    color: #fff;
+  }
+  div.vendor_store_apply .custom_col .show_image_area{
+    width: 160px;
+    border: #dcdcdc 1px solid;
+    margin: 0 10px 0 0;
+    padding: 0;
+  }
+  div.vendor_store_apply .tab-content .custom_col{
+    width: 280px;
+  }
+  div.vendor_store_apply .tab-content .custom_col:first-child{
+    margin-left: 50px;
+  }
+  div.vendor_store_apply .custom_col .row .col-md-5:last-child{
+    width: 110px;
+  }
+  div.vendor_store_apply .custom_col .row .col-md-5:last-child span{
+    margin-top: 85% !important;
+    padding-bottom: 0 !important;
+  }
+  .hoverShow{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    top: 0px;
+    right: 0;
+    background: rgba(0,0,0,.4);
+    display: none;
+  }
+
+  div.vendor_store_apply .custom_col .show_image_area:hover .hoverShow{
+    display: block;
+  }
+  div.vendor_store_apply .custom_col .show_image_area .deleteImg{
+    position: absolute;
+    right: 7px;
+    top: 0;
+    display: inline-block;
+    padding: 0;
+    margin-top: 6px;
+    font-size: 18px;
+    color: #fff;
+  }
+  .hover-show a{
+    color: #fff;
+    text-decoration: none;
+  }
+  .hover-show a:hover, .hover-show a:active, .hover-show a:focus{
+    color: #fff;
+    text-decoration: none;
+  }
 </style>