brand ctx

OF1706
Commit b0e10681d5b38c7fc79d955337c30f51a9311fe3 1 parent e7989eb0
Showing 9 changed files with 246 additions and 149 deletions
apps/brands/controllers/brands.js
apps/brands/models/brands-api.js
apps/brands/models/brands-model.js
apps/brands/models/brands-service.js
apps/brands/views/action/brands/brands.hbs
apps/product/models/detail-service.js
doraemon/views/partial/header.hbs
public/js/header.js
public/scss/common/_header.css
--- a/apps/brands/controllers/brands.js
View file @b0e1068
+++ b/apps/brands/controllers/brands.js
View file @b0e1068
@@ -19,7 +19,7 @@ const brandsService = require(`${mRoot}/brands-service`); // students 页 model
 exports.index = (req, res, next) => {
     let channel = req.query.channel || req.cookies._Channel || 'boys';
-    brandsService.getBrandViewList(channel, req).then(result => {
+    req.ctx(brandsService).getBrandViewList(channel, req).then(result => {
         // 返回null，不cashe
         if (result.noCashe) {
             res.set('Cache-Control', 'no-cache');
@@ -35,7 +35,7 @@ exports.index = (req, res, next) => {
 exports.brandList = (req, res, next) => {
     let channel = req.query.channel || req.cookies._Channel || 'boys';
-    brandsService.getBrandList(channel, req.body.start).then(result => {
+    req.ctx(brandsService).getBrandList(channel, req.body.start).then(result => {
         res.render('brands/brand-list', Object.assign({layout: false}, result));
@@ -52,7 +52,7 @@ exports.brandInfo = (req, res, next) => {
     let brandId = req.query.brandId || 0;
-    brandsService.brandInfo(brandId, req.user.uid).then(result => {
+    req.ctx(brandsService).brandInfo(brandId, req.user.uid).then(result => {
         // 返回null，不cashe
         if (result.noCashe) {
             res.set('Cache-Control', 'no-cache');
@@ -67,7 +67,7 @@ exports.brandInfo = (req, res, next) => {
 exports.plusstarList = (req, res, next) => {
     let channel = req.query.channel || req.yoho.channel;
-    brandsService.plusstarList(channel, req).then(result => {
+    req.ctx(brandsService).plusstarList(channel, req).then(result => {
         // 返回null，不cashe
         if (result.noCashe) {
             res.set('Cache-Control', 'no-cache');
--- a/apps/brands/models/brands-api.js
View file @b0e1068
+++ b/apps/brands/models/brands-api.js
View file @b0e1068
@@ -4,81 +4,126 @@
  * @date: 2016/9/29
  */
 'use strict';
-const api = global.yoho.API;
-const serviceAPI = global.yoho.ServiceAPI;
-const config = global.yoho.config;
-/**
+module.exports = class extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    /**
      * 分开取数，品牌一览 顶部的轮翻广告及热门品牌数据-PC
      * 顶部的轮翻广告及热门品牌数据
      *  @param string $contentCode 获取广告资源需要的位置码
      */
-const getBrandTopData = (contentCode) => {
-    return serviceAPI.get('operations/api/v5/resource/get', {
+    getBrandTopData(contentCode) {
+        return this.get({
+            url: 'operations/api/v5/resource/get',
+            data: {
                 content_code: contentCode
-    }, config.apiCache);
-};
+            },
+            param: {
+                cache: true
+            },
+            api: global.yoho.ServiceAPI
+        });
+    }
-/**
+    /**
      * 分开取数，获取品牌一览 "按字母'A-Z'分组的品牌列表数据"
      * @param int $channel 频道标识 1:男,2:女,3:潮童,4:创意生活
      */
-const getBrandListData = channel => {
-    let params = {method: 'app.brand.allBrandList'};
+    getBrandListData(channel) {
+
+        let data = {
+            method: 'app.brand.allBrandList'
+        };
         if (!isNaN(channel)) {
-        params.yh_channel = channel;
+            data.yh_channel = channel;
         }
-    return api.get('', params, config.apiCache);
-};
-/**
+        return this.get({
+            data: data,
+            param: {
+                code: 200,
+                cache: true
+            }
+        });
+    }
+
+    /**
      * 获取品牌简介
      *
      * @param  integer $brandId 品牌ID
      * @param  int 用户ID
      * @return array  品牌介绍信息
      */
-const getBrandIntro = (brandId, uid) => {
-    let param = {};
+    getBrandIntro(brandId, uid) {
-    if (!uid) {
-        param.cache = 3600;
-    }
-    return api.get('', {
+        let data = {
             method: 'app.brand.getBrandIntro',
             brand_id: brandId,
             uid: uid
-    }, param, config.apiCache);
-};
+        };
-/**
+        if (!uid) {
+            data.cache = 3600;
+        }
+
+        return this.get({
+            data: data,
+            param: {
+                code: 200,
+                cache: true
+            }
+        });
+    }
+
+    /**
      * 获取品牌中产品图片
      * @param  int 品牌ID
      * @return array  品牌产品信息
      */
-const getProductByBrand = (brandId, limit) => {
-    return api.get('', {
+    getProductByBrand(brandId, limit) {
+
+        let data = {
             method: 'web.search.search',
             brand: brandId,
             limit: limit
-    }, config.apiCache);
-};
+        };
-/**
+        return this.get({
+            data: data,
+            param: {
+                code: 200,
+                cache: true
+            }
+        });
+    }
+
+    /**
      * 获取品牌信息
      *
      * @param array $ids
      * @return array
      */
-const getBrandInfoByIds = (ids) => {
-    return api.get('', {
+    getBrandInfoByIds(ids) {
+
+        let data = {
             method: 'web.brand.info',
             ids: ids instanceof Array ? ids.join(',') : parseInt(ids, 10)
-    }, config.apiCache);
-};
+        };
-/**
+        return this.get({
+            data: data,
+            param: {
+                code: 200,
+                cache: true
+            }
+        });
+    }
+
+    /**
      * 获取品牌列表
      *
      * @param int $brandType
@@ -86,18 +131,32 @@ const getBrandInfoByIds = (ids) => {
      * @param string $type
      * @return array
      */
-const getPlusstarList = (brandType, gender) => {
-    return serviceAPI.get('guang/api/v3/plustar/getlist', {
+    getPlusstarList(brandType, gender) {
+        return this.get({
+            url: 'guang/api/v3/plustar/getlist',
+            data: {
                 gender: gender,
                 brand_type: brandType
-    }, config.apiCache);
-};
+            },
+            param: {
+                cache: true
+            },
+            api: global.yoho.ServiceAPI
+        });
+    }
+
+    getPlusstarBrandListItem(code) {
+        return this.get({
+            url: 'operations/api/v5/resource/get',
+            data: {
+                content_code: code
+            },
+            param: {
+                cache: 3600
+            },
+            api: global.yoho.ServiceAPI
+        });
+    }
-module.exports = {
-    getBrandTopData,
-    getBrandListData,
-    getBrandIntro,
-    getProductByBrand,
-    getPlusstarList,
-    getBrandInfoByIds
 };
+
--- a/apps/brands/models/brands-model.js
View file @b0e1068
+++ b/apps/brands/models/brands-model.js
View file @b0e1068
@@ -10,8 +10,9 @@ const Promise = require('bluebird');
 const co = Promise.coroutine;
 const _ = require('lodash');
 const helpers = global.yoho.helpers;
-const brandApi = require('./brands-api');
-const serviceApi = global.yoho.ServiceAPI;
+const BrandApi = require('./brands-api');
+const path = require('path');
+const imgUtils = require(path.join(global.utils, 'images'));
 // 品牌一览资源位CODE码
 const channelCode = {
@@ -33,13 +34,19 @@ const LIFESTYLE = 'lifestyle';
 const GLOBAL_BASE_URI = '/product/global/list';
-/**
+module.exports = class extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    /**
      * 获取品牌一览资源位&channelType
      *
      * @param string $channelStr
      * @return array
      */
-const switchBrandParams = channel => {
+    switchBrandParams(channel) {
+
         let req = {};
         switch (channel) {
@@ -76,17 +83,20 @@ const switchBrandParams = channel => {
                 break;
         }
         return req;
-};
+    }
-/**
+    /**
      * 获取品牌一览页面，品牌top
      * @param string $channel 频道名称
      */
-const getBrandViewTop = channel => {
+    getBrandViewTop(channel) {
+        let that = this;
+        let brandData = new BrandApi(that.ctx);
+
         return co(function*() {
-        let switchParams = switchBrandParams(channel);
+            let switchParams = that.switchBrandParams(channel);
-        let res = yield brandApi.getBrandTopData(switchParams.brandCode);
+            let res = yield brandData.getBrandTopData(switchParams.brandCode);
             let result = {},
                 brandAds = [],
@@ -98,11 +108,15 @@ const getBrandViewTop = channel => {
             // 头部10个品牌小图块 url
             if (res.data && res.data instanceof Array && res.data[1].data && res.data[1].data.list) {
-
+                console.log(res.data[1].data.list);
                 _.forEach(res.data[1].data.list, subValue => {
                     brandAds.push({
                         name: subValue.name,
-                    src: helpers.image(subValue.src, 80, 50, 3),
+                        src: helpers.image(imgUtils.getImageUrl(
+                            (subValue.src.match(/(\S*)imageView2/)[1] +
+                            'imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/' +
+                            'background/d2hpdGU=/position/center/quality/80'),
+                             136, 57), 136, 57),
                         url: subValue.url
                     });
                 });
@@ -147,19 +161,22 @@ const getBrandViewTop = channel => {
             return result;
         })();
-};
+    }
-/**
+    /**
      * 获取品牌一览list
      * @param string $channel 频道名称
      * @param int start  开始位置 1 开始
      * @param int length 取数长度 0 取到最后
      */
-const getBrandViewList = (channel, start, length) => {
+    getBrandViewList(channel, start, length) {
+        let that = this;
+        let brandData = new BrandApi(that.ctx);
+
         return co(function*() {
-        let switchParams = switchBrandParams(channel);
+            let switchParams = that.switchBrandParams(channel);
-        let res = yield brandApi.getBrandListData(switchParams.channelType);
+            let res = yield brandData.getBrandListData(switchParams.channelType);
             let result = [],
                 numResult = {};
@@ -258,29 +275,32 @@ const getBrandViewList = (channel, start, length) => {
             result.navigation = _.map(result, 'key');
             return result;
         })();
-};
+    }
-/**
+    /**
      * 获取单个广告浮窗内容
      *
      * @param int $brandId
      * @param int $uid
      * @return array
      */
-const getBrandInfo = (brandId, uid) => {
+    getBrandInfo(brandId, uid) {
+        let that = this;
+        let brandData = new BrandApi(that.ctx);
+
         return co(function*() {
             let data = {},
                 imgs = [];
             // 获取品牌简介
-        let res = yield brandApi.getBrandIntro(brandId, uid);
+            let res = yield brandData.getBrandIntro(brandId, uid);
             if (!res || res.code !== 200) {
                 return data;
             }
             if (res.data) {
                 // 获取品牌下的产品信息
-            let proInfo = yield brandApi.getProductByBrand(brandId, 3);
+                let proInfo = yield brandData.getProductByBrand(brandId, 3);
                 if (!proInfo || proInfo.code !== 200) {
                     return data;
@@ -307,17 +327,20 @@ const getBrandInfo = (brandId, uid) => {
             }
             return data;
         })();
-};
+    }
-/**
+    /**
      * 多个品牌ID获取品牌信息
      *
      * @param array $brandIds
      * @return array
      */
-const getBrandInfoByIds = (brandIds) => {
+    getBrandInfoByIds(brandIds) {
+        let that = this;
+        let brandData = new BrandApi(that.ctx);
+
         return co(function*() {
-        let res = yield brandApi.getBrandInfoByIds(brandIds);
+            let res = yield brandData.getBrandInfoByIds(brandIds);
             let brandsInfo = {};
@@ -336,21 +359,24 @@ const getBrandInfoByIds = (brandIds) => {
             return brandsInfo;
         })();
-};
+    }
-/**
+    /**
      * 获取plusstar品牌列表项目
      *
      * @param string $channel
      * @return array
      */
-const getPlusstarBrandListItem = (channel) => {
+    getPlusstarBrandListItem(channel) {
+        let that = this;
+        let brandData = new BrandApi(that.ctx);
+
         return co(function*() {
             let code = channel === 'girls' ? channelCode.brand_plusstar_banner_girls :
                 channelCode.brand_plusstar_banner_boys;
             // 资源位数据
-        let resource = yield serviceApi.get('operations/api/v5/resource/get', {content_code: code}, {cache: 3600});
+            let resource = yield brandData.getPlusstarBrandListItem(code);
             let items = [];
@@ -358,7 +384,8 @@ const getPlusstarBrandListItem = (channel) => {
                 return items;
             }
             if (resource.data && resource.code === 200) {
-            items[0] = {name: '所有品牌', src: '', url: helpers.urlFormat('/brands', {channel: channel}), brandType: ''};
+                items[0] = {name: '所有品牌', src: '', url: helpers.urlFormat('/brands',
+                           {channel: channel}), brandType: ''};
                 items[1] = {name: '设计新潮', src: '', url: '', brandType: 4};
                 items[2] = {name: '潮流经典', src: '', url: '', brandType: 1};
                 items[3] = {name: '明星潮牌', src: '', url: '', brandType: 2};
@@ -382,18 +409,21 @@ const getPlusstarBrandListItem = (channel) => {
             return items;
         })();
-};
+    }
-/**
+    /**
      * 获取Plustar列表
      *
      * @param string $brandType
      * @param string $gender
      * @return array
      */
-const getPlustarList = (brandType, gender) => {
+    getPlustarList(brandType, gender) {
+        let that = this;
+        let brandData = new BrandApi(that.ctx);
+
         return co(function*() {
-        let list = yield brandApi.getPlusstarList(brandType, gender);
+            let list = yield brandData.getPlusstarList(brandType, gender);
             let brandList = {},
                 data = {},
@@ -430,13 +460,5 @@ const getPlustarList = (brandType, gender) => {
             return result;
         })();
-};
-
-module.exports = {
-    getBrandViewTop,
-    getBrandViewList,
-    getBrandInfo,
-    getBrandInfoByIds,
-    getPlusstarBrandListItem,
-    getPlustarList
+    }
 };
--- a/apps/brands/models/brands-service.js
View file @b0e1068
+++ b/apps/brands/models/brands-service.js
View file @b0e1068
@@ -9,7 +9,7 @@ const Promise = require('bluebird');
 const co = Promise.coroutine;
 const api = global.yoho.API;
 const headerModel = require('../../../doraemon/models/header');
-const brandsModel = require('./brands-model');
+const BrandsModel = require('./brands-model');
 const _ = require('lodash');
 const helpers = global.yoho.helpers;
 const pager = require(`${global.utils}/pager`).setPager;
@@ -20,13 +20,18 @@ const KIDS = 'kids';
 const LIFESTYLE = 'lifestyle';
 const queryString = require('querystring');
-/**
+module.exports = class extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    /**
      * 获取品牌一览资源位&channelType
      *
      * @param string $channelStr
      * @return array
      */
-const getGenderByChannel = channel => {
+    getGenderByChannel(channel) {
         let gender = '';
         switch (channel) {
@@ -42,9 +47,9 @@ const getGenderByChannel = channel => {
                 break;
         }
         return gender;
-};
+    }
-const getHomeurlByChannel = channel => {
+    getHomeurlByChannel(channel) {
         let home;
         switch (channel) {
@@ -62,10 +67,11 @@ const getHomeurlByChannel = channel => {
                 break;
         }
         return home;
-};
+    }
-// 添加网站的SEO
-const seoMap = {
+    // 添加网站的SEO
+    seoMap() {
+        return {
             boys: {
                 title: '品牌一览|男装品牌排行榜,男装品牌大全|YOHO!BUY 有货 100%正品保证',
                 keywords: '品牌一览,男装品牌,男装品牌排行榜,男装品牌大全,YOHO!BUY 有货',
@@ -102,29 +108,33 @@ const seoMap = {
                 description: 'YOHO!BUY 有货女装品牌一览汇集国内国际各大女装品牌,为广大爱美女生提供品牌女装、' +
                 '休闲女装、商务女装.买品牌女装就上YOHO!BUY 有货,100%正品保证'
             }
-};
+        };
+    }
-/**
+    /**
      * plusstar 分页链接伪静态
      * @param string uri
      * @param string originUrl  动态地址
      */
-const staticUrl = (uri, originUrl) => {
+    staticUrl(uri, originUrl) {
         originUrl = queryString.parse(_.split(originUrl, '?')[1]);
         return `${uri}id${originUrl.id || 0}-p${originUrl.page || 1}/`;
-};
+    }
-/**
+    /**
      * 获取品牌一览list
      * @param string $channel 频道名称
      * @param int start  开始位置 1 开始
      * @param int length 取数长度 0 取到最后
      */
-exports.getBrandViewList = (channel) => {
+    getBrandViewList(channel) {
+        let that = this;
+        let brandsModelCtx = new BrandsModel(that.ctx);
+
         let apiMethod = [
             headerModel.requestHeaderData(channel),
-        brandsModel.getBrandViewTop(channel),
-        brandsModel.getBrandViewList(channel) // 分屏加载
+            brandsModelCtx.getBrandViewTop(channel),
+            brandsModelCtx.getBrandViewList(channel) // 分屏加载
         ];
         return api.all(apiMethod).then(result => {
@@ -145,7 +155,7 @@ exports.getBrandViewList = (channel) => {
             // 导航pathNav
             responseData.brands.pathNav = [
                 {
-                href: getHomeurlByChannel(channel),
+                    href: that.getHomeurlByChannel(channel),
                     name: `${_.toUpper(channel)}首页`,
                     pathTitle: 'YOHO!BUY 有货'
                 },
@@ -157,7 +167,7 @@ exports.getBrandViewList = (channel) => {
             ];
             // SEO
-        Object.assign(responseData, seoMap[channel]);
+            Object.assign(responseData, that.seoMap[channel]);
             // 数据出错不cashe
             if (_.isEmpty(result[0].headerData) || _.isEmpty(result[1]) || _.isEmpty(result[2])) {
@@ -165,14 +175,17 @@ exports.getBrandViewList = (channel) => {
             }
             return responseData;
         });
-};
+    }
-/**
+    /**
      * brandList-Ajax调用
      */
-exports.getBrandList = (channel, start) => {
+    getBrandList(channel, start) {
+        let that = this;
+        let brandsModelCtx = new BrandsModel(that.ctx);
+
         let apiMethod = [
-        brandsModel.getBrandViewList(channel, start)
+            brandsModelCtx.getBrandViewList(channel, start)
         ];
         return api.all(apiMethod).then(result => {
@@ -182,17 +195,20 @@ exports.getBrandList = (channel, start) => {
             responseData.category = result[0];
             return responseData;
         });
-};
+    }
-/**
+    /**
      * 品牌接口数据
      *
      * @param string brandId 获取品牌ID
      * @return json
      */
-exports.brandInfo = (brandId, uid) => {
+    brandInfo(brandId, uid) {
+        let that = this;
+        let brandsModelCtx = new BrandsModel(that.ctx);
+
         let apiMethod = [
-        brandsModel.getBrandInfo(brandId, uid)
+            brandsModelCtx.getBrandInfo(brandId, uid)
         ];
         return api.all(apiMethod).then(result => {
@@ -208,15 +224,18 @@ exports.brandInfo = (brandId, uid) => {
             }
             return responseData;
         });
-};
+    }
-/**
+    /**
      * 多个品牌ID获取品牌信息
      *
      * @param array $brandIds
      * @return array
      */
-exports.plusstarList = (channel, req) => {
+    plusstarList(channel, req) {
+        let that = this;
+        let brandsModelCtx = new BrandsModel(that.ctx);
+
         return co(function*() {
             let headerData = yield headerModel.requestHeaderData(channel);
@@ -228,18 +247,18 @@ exports.plusstarList = (channel, req) => {
             };
             let id = req.query.id || '',
-            gender = req.query.gender || getGenderByChannel(channel),
+                gender = req.query.gender || that.getGenderByChannel(channel),
                 limit = 20,
                 page = parseInt(req.query.page, 10) || 1;
-        let items = yield brandsModel.getPlusstarBrandListItem(channel);
+            let items = yield brandsModelCtx.getPlusstarBrandListItem(channel);
             let brandType = 1;
             if (+id !== 0 && items[id]) {
                 brandType = items[id].brandType;
             }
-        let plustarList = yield brandsModel.getPlustarList(brandType, gender);
+            let plustarList = yield brandsModelCtx.getPlustarList(brandType, gender);
             let list = plustarList.data;
@@ -260,19 +279,19 @@ exports.plusstarList = (channel, req) => {
                 // url 伪静态
                 _.forEach(pageList.pages, (val) => {
-                val.url = staticUrl(`/${channel}-brands/plusstar/`, val.url);
+                    val.url = that.staticUrl(`/${channel}-brands/plusstar/`, val.url);
                 });
                 if (pageList.nextPage) {
-                pageList.nextPage.url = staticUrl(`/${channel}-brands/plusstar/`, pageList.nextPage.url);
+                    pageList.nextPage.url = that.staticUrl(`/${channel}-brands/plusstar/`, pageList.nextPage.url);
                 }
                 if (pageList.prePage) {
-                pageList.prePage.url = staticUrl(`/${channel}-brands/plusstar/`, pageList.prePage.url);
+                    pageList.prePage.url = that.staticUrl(`/${channel}-brands/plusstar/`, pageList.prePage.url);
                 }
             }
             if (brandIds.length > 0) {
                 // 获取品牌信息
-            let brandsInfo = yield brandsModel.getBrandInfoByIds(brandIds);
+                let brandsInfo = yield brandsModelCtx.getBrandInfoByIds(brandIds);
                 _.forEach(brandIds, brandId => {
                     if (brandsInfo[brandId]) {
@@ -306,8 +325,9 @@ exports.plusstarList = (channel, req) => {
             Object.assign(responseData, pageList);
             // SEO
-        Object.assign(responseData, seoMap[`${channel}-plusstar`] || {});
+            Object.assign(responseData, that.seoMap[`${channel}-plusstar`] || {});
             return responseData;
         })();
+    }
 };
--- a/apps/brands/views/action/brands/brands.hbs
View file @b0e1068
+++ b/apps/brands/views/action/brands/brands.hbs
View file @b0e1068
@@ -36,7 +36,7 @@
     <div class="brands-logo clearfix">
         {{#each logos}}
             <a href="{{url}}" title="{{name}}" target="_blank">
-                <img class="lazy" data-original="{{image2 src}}">
+                <img class="lazy" src="{{image2 src w=136 h=57}}">
             </a>
         {{/each}}
     </div>
--- a/apps/product/models/detail-service.js
View file @b0e1068
+++ b/apps/product/models/detail-service.js
View file @b0e1068
@@ -318,6 +318,7 @@ const _getSkuDataByProductBaseInfo = (data) => {
             }
         }
+        console.log(goods.images_list);
         _.get(goods, 'images_list', []).forEach((good) => {
             if (good.image_url) {
                 goodsDetail.thumbs.push({
--- a/doraemon/views/partial/header.hbs
View file @b0e1068
+++ b/doraemon/views/partial/header.hbs
View file @b0e1068
@@ -287,5 +287,6 @@
     <div class="code-down-box">
         <div class="code-img"></div>
         <h5 class="code-title">下载手机客户端</h5>
+        <i class="iconfont icon-del"></i>
     </div>
 {{/ headerData}}
--- a/public/js/header.js
View file @b0e1068
+++ b/public/js/header.js
View file @b0e1068
@@ -987,21 +987,8 @@ function searchSuggestHistory() {
 }
 $(function() {
-    var windowWidth = document.documentElement.clientWidth;
-
-    if (windowWidth <= 1440) {
-        $('.code-down-box').hide();
-    }
-
-    $(window).resize(function() {
-        var innerWindowWidth = window.innerWidth;
-
-        if (innerWindowWidth > 1440 && innerWindowWidth <= windowWidth) {
-            $('.code-down-box').show();
-
-        } else {
+    $('.code-down-box').bind('click', '.icon-del', function() {
         $('.code-down-box').hide();
-        }
     });
 });
--- a/public/scss/common/_header.css
View file @b0e1068
+++ b/public/scss/common/_header.css
View file @b0e1068
@@ -1494,7 +1494,7 @@
     border: none;
     background-color: transparent;
     z-index: 990;
-    display: none;
+    display: block;
     .code-img {
         width: 117px;
@@ -1511,10 +1511,17 @@
         line-height: 20px;
         text-align: center;
     }
-}
-@media screen and (min-width: 1440px) {
-    .code-down-box {
-        display: block;
+    .icon-del {
+        position: absolute;
+        top: -13px;
+        right: -10px;
+        display: inline-block;
+        font-size: 30px;
+        cursor: pointer;
+
+        &:before {
+            content: "\e60d";
+        }
     }
 }