首次提交

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,93 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# nuxt.js build output
+nuxt-dist
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+}

App.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+// console.log(Setting, 'Setting')
+if (localStorage.getItem("token")) {
+  (function () {
+    _s = document.createElement("script");
+    // _s.src = "https://yaochangkf.three.xinzhidi.cn/customerServer.js";
+    _s.src = Setting.kfURL + "/customerServer.js";
+    _s.onload = function () {
+      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
+      var uplodBaseURL = localStorage.getItem("uplodBaseURL");
+      var option = {
+        authInit: true,
+        openUrl: Setting.kfURL, // "https://yaochangkf.three.xinzhidi.cn",
+        token: Setting.kfToken,
+        kefuid: "", //默认为空自动对接客服，可填写指定客服ID
+        isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
+        mobileIcon: "", //  手机端悬浮客服图片
+        pcIcon: "", // pc端悬浮客服图片
+        windowStyle: "center", //默认空 右下角小弹窗， center 普通中间弹窗样式
+        sendUserData: {
+          uid: userInfo.member_id, // 用户id
+          nickName: userInfo.nickname, // 用户昵称
+          phone: userInfo.mobile, // 用户联系方式
+          sex: userInfo.sex, // 用户性别
+          avatar: uplodBaseURL + userInfo.headimg, // 用户头像 URL地址
+          openid: "", //微信openid
+        },
+      };
+      var canCustomerServer = new initCustomerServer(option);
+      canCustomerServer.init();
+    };
+    document.head.appendChild(_s);
+  })();
+}
+</script>

Dockerfile

@@ -0,0 +1,14 @@
+#1、基于镜像node，版本自己查看上面的链接
+FROM node:10.15.3
+RUN mkdir -p /nuxt
+#6、复制当前的内容到容器内容部目录blog
+# COPY . /blogNuxt
+#7、切换工作目录到blog
+# WORKDIR /blogNuxt
+#8、暴露端口3000，默认端口
+# EXPOSE 3000
+#9、配置npm的远程仓库
+RUN npm config set registry https://registry.npmmirror.com
+# RUN npm install
+#13、start
+CMD ["npm", "start"]

README.md

@@ -1,3 +1,107 @@
-# Web_QiCaiYao
+# CRMEB pc模板
+## 开发规范
+市面上常用的命名规范：
+
+* camelCase（小驼峰式命名法 —— 首字母小写）
+* PascalCase（大驼峰式命名法 —— 首字母大写）
+* kebab-case（短横线连接式）
+* snake_a（下划线连接式）
+
+##### 项目文件命名
+#####1、项目名
+#####全部采用小写方式， 以下划线分隔。 例：crmeb_pro_pc；
+#####2、组件（components）
+#####优先选择单个单词命名，多个单词命名以小驼峰式命名。例：crmebPro；
+#####3、pages里面的文件名；
+#####全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。 例：crmeb_pro_pc；
+#####4、css文件名；
+#####全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。例：crmeb-pro.css
+#####5、JavaScript 文件名；
+#####全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。例：crmeb-pro.js
+#####6、HTML 文件名；
+#####全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。例：crmeb_pro.html
+#####7、图像文件名；
+#####全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。例：crmeb-pro.jpg
+
+## 目录结构
+主要目录结构及说明：
+~~~
+├── assets                    # 图片、小图标自、css等静态资源
+│   ├── css                   # css样式文件
+│   ├── iconfont              # 小图标
+│   ├── images                # 图片
+│   └── theme                 # element的scss样式
+│   ├── components            # 公共组件
+│   │    └──ChatRoom          # 客服
+│   │    └──countDown         # 倒计时
+│   │    └──ffVip             # 扫码激活付费会员
+│   │    └──footers           # 底部导航
+│   │    └──headers           # 头部导航
+│   │    └──hotGoods          # 热销推荐
+│   ├── layouts               # 布局
+│   ├── libs                  
+│   │    └──socket            # 检测长链接
+│   ├── middleware            # 中间插件
+│   ├── mixins                # 通用混合
+│   │    └──appChat          # 客服插件
+│   │    └──SendVerifyCode  # 获取验证码
+│   ├── pages                 # 所有页面
+│   │    └──goods_detail      # 商品详情
+│   │    └──user              # 个人中心
+│   │         └──address_list # 地址列表
+│   │         └──balance      # 我的余额
+│   │         └──collect      # 我的收藏
+│   │         └──index        # 账户管理
+│   │         └──messageCenter# 站内信
+│   │         └──myCoupon     # 我的优惠券
+│   │         └──orderList    # 订单列表
+│   │         └──refundList   # 退款列表
+│   │         └──userCoupon   # 领取优惠券
+│   │    └──alipay             # 支付页
+│   │    └──AppChat            # 客服页
+│   │    └──evaluation         # 商品评价
+│   │    └──goods_cate         # 应用
+│   │    └──goods_list         # 商品列表
+│   │    └──goods_presell      # 预售列表
+│   │    └──goods_search       # 商品搜索
+│   │    └──goods_seckill      # 秒杀列表
+│   │    └──goods_seckill_detail # 秒杀详情
+│   │    └──index              # 首页
+│   │    └──login              # 登录页
+│   │    └──logistics          # 物流详情
+│   │    └──order_confirm      # 确认订单
+│   │    └──order_detail       # 订单详情
+│   │    └──payment            # 去支付
+│   │    └──refund             # 申请退款
+│   │    └──refund_goods       # 退款订单
+│   │    └──shoppingCart       # 购物车
+│   │    └──user               # 个人中心
+│   │    └──wxPay              # 微信支付
+│   ├── plugins                # 插件
+│   ├── static                 # 静态文件
+│   ├── store                  # Vuex 状态管理
+│   ├── utils                  # js工具
+│   ├── setting_dev.js         # 开发配置文件
+│   ├── setting.js             # 业务配置文件
+├── package.json               # 插件集合
+└── nuxt.config.js             # 配置文件以及插件引入文件
+~~~
+## 开发打包项目
+~~~
+# 进入项目目录
+$ cd crmeb_pro_pc
+
+# 安装依赖
+$ npm install
+
+# 启动项目(本地开发环境)
+$ npm run dev
+
+# 打包项目
+静态部署
+$ npm run generate
+单页面
+$ npm run build
+~~~
+
 
-齐采药WEB端项目

assets/css/base.css

@@ -0,0 +1,207 @@
+@charset "UTF-8";
+/**
+    *相关初始化
+*/
+.font-color {
+  /* color: #E93323 !important; */
+
+  color:  var(--themeColor) !important;
+  
+
+}
+.url-color{
+  color: var(--themeColor) !important;
+  border-bottom: 2px solid   var(--themeColor) !important;
+}
+.bg-color {
+  background-color:  var(--themeColor) !important;
+}
+/* padding20 */
+.padding20 {
+  padding: 0.2rem;
+}
+/* pad20 */
+.pad20 {
+  padding: 0 0.2rem;
+}
+/* padding30 */
+.padding30 {
+  padding: 0.3rem;
+}
+/*pad30 */
+.pad30 {
+  padding: 0 0.3rem;
+}
+/* layout */
+.acea-row {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-lines: multiple;
+  -moz-box-lines: multiple;
+  -o-box-lines: multiple;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  /* 辅助类 */
+}
+.acea-row.row-middle {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -o-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+.acea-row.row-top {
+  -webkit-box-align: start;
+  -moz-box-align: start;
+  -o-box-align: start;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+}
+.acea-row.row-bottom {
+  -webkit-box-align: end;
+  -moz-box-align: end;
+  -o-box-align: end;
+  -ms-flex-align: end;
+  -webkit-align-items: flex-end;
+  align-items: flex-end;
+}
+.acea-row.row-center {
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -o-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+.acea-row.row-right {
+  -webkit-box-pack: end;
+  -moz-box-pack: end;
+  -o-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+.acea-row.row-left {
+  -webkit-box-pack: start;
+  -moz-box-pack: start;
+  -o-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+}
+.acea-row.row-between {
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -o-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+.acea-row.row-around {
+  justify-content: space-around;
+  -webkit-justify-content: space-around;
+}
+.acea-row.row-column-around {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-content: space-around;
+  -webkit-justify-content: space-around;
+}
+.acea-row.row-column {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -o-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.acea-row.row-column-between {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -o-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -o-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+/* 上下左右垂直居中 */
+.acea-row.row-center-wrapper {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -o-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -o-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+/* 上下两边居中对齐 */
+.acea-row.row-between-wrapper {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -o-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -o-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+/* 轮播图 */
+.slider-banner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.slider-banner .swiper-container {
+  height: 100%;
+}
+.slider-banner img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.start {
+  width: 1.22rem;
+  height: 0.3rem;
+  /*background-image: url("../images/start.png");*/
+  background-repeat: no-repeat;
+  background-size: 1.22rem auto;
+}
+.start.star5 {
+  background-position: 0 0.03rem;
+}
+.start.star4 {
+  background-position: 0 -0.3rem;
+}
+.start.star3 {
+  background-position: 0 -0.7rem;
+}
+.start.star2 {
+  background-position: 0 -1.05rem;
+}
+.start.star1 {
+  background-position: 0 -1.4rem;
+}
+.start.star0 {
+  background-position: 0 -1.75rem;
+}

assets/css/css.css

@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+.wrapper_1200{width:1200px;margin:0 auto;overflow:hidden;}
+.min_wrapper_1200{min-width:1200px;width:auto !important;width:1200px;}
+img{display: block;}
+.icon {
+  width: 30px; height: 30px;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+::-webkit-input-placeholder {
+  color: #CCCCCC !important;
+}
+
+::-moz-placeholder {
+  color: #CCCCCC !important;
+}
+
+:-ms-input-placeholder {
+  color: #CCCCCC !important;
+}
+@keyframes load {
+  from {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+@-webkit-keyframes load {
+  from {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}
+.font-color-red{
+	color: #e93323;
+}
+.loadingicon{width: 100%;height: 100px;overflow: hidden;}
+.loadingicon .loading{font-size: 40px;animation: load linear 1s infinite;color: #000;width: 40px;height: 40px;
+  text-align: center;line-height: 40px;margin-right: 10px;}
+/* 单选框和多选框 */
+.checkbox-wrapper {
+  position: relative;
+}
+.checkbox-wrapper input {
+  display: none;
+}
+.checkbox-wrapper .icon {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #cccccc;
+  border-radius: 50%;
+  -webkit-transform: translate(0, -50%);
+  -moz-transform: translate(0, -50%);
+  -o-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+.checkbox-wrapper input:checked + .icon {
+  background-color: #e93323;
+  border-color: #e93323;
+  background-image: url("../images/enter.png");
+  -webkit-background-size: 10px 8px;
+  -moz-background-size: 10px 8px;
+  background-size: 10px 8px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+
+
+.Checkbox {
+  position: absolute;
+  visibility: hidden;
+  outline: none;
+  background: #fff;
+}
+.Checkbox+label {
+  position:absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #9B9B9B;
+  border-radius: 50%;
+  background-color:#fff;
+  left: 11px;
+  top: 50%;
+  margin-top: -8px;
+}
+.Checkbox:checked+label:after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top:3px;
+  width: 6px;
+  height: 3px;
+  border: 2px solid #9B9B9B;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+.index .banner .swiper-pagination{bottom:14px;text-align: right;padding-right: 20px;}
+.index .banner .swiper-pagination-bullet{width: 34px;height: 2px;background: #FFFFFF;opacity: 0.8;border-radius: 1px;}
+.index .banner .swiper-pagination-bullet-active{opacity:1;height: 3px;border-radius: 3px;}
+.index .banner .swiper-button-next{background-image:none;width: 46px;height: 46px;background-size: 100% 100%;right: 17px;}
+.index .banner .swiper-button-prev{background-image:none;width: 46px;height: 46px;background-size: 100% 100%;left:225px;}
+.index .banner:hover .swiper-button-next{background-image:url("../../assets/images/right.png");}
+.index .banner:hover .swiper-button-prev{background-image:url("../../assets/images/left.png");}
+.index .seckill .header .time .styleAll{padding: 5px;background-color: #222222;font-weight: bold;}
+.index .seckill .header .time .red{margin: 4px 5px;}
+.index .seckill .seckillList .swiper-button-next{background-image:url("../../assets/images/right01.png");width: 25px;height: 34px;background-size: 100% 100%;right: 0;}
+.index .seckill .seckillList .swiper-button-prev{background-image:url("../../assets/images/left01.png");width: 25px;height: 34px;background-size: 100% 100%;left:0;}
+.index .seckill .seckillList:hover .swiper-button-next{background-image:url("../../assets/images/right02.png");}
+.index .seckill .seckillList:hover .swiper-button-prev{background-image:url("../../assets/images/left02.png");}
+.user-com-title{
+  height: 60px;
+  line-height: 60px;
+  font-size: 18px;
+  color: #282828;
+  border-bottom:1px solid #ECECEC;
+}

assets/css/index.scss

@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import "./base.css";
+@import "./css.css";
+@import "./reset.css";
+
+
+.user-com-tab{
+  border-bottom: 1px solid #ECECEC;
+  span{
+    position: relative;
+    height:60px;
+    line-height: 60px;
+    font-size: 16px;
+    color: #999999;
+    cursor: pointer;
+    padding: 0 26px 0 8px;
+    margin-right: 26px;
+    &.on{
+      color: #E93323;
+      font-size: 18px;
+      &:after{
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -21px;
+        width: 100%;
+        height: 2px;
+        background: #E93323;
+      }
+    }
+  }
+}
+.empty-box{
+  padding-top: 150px;
+  text-align: center;
+  p{
+    margin-top: 10px;
+    font-size: 12px;
+    color: #969696;
+  }
+  img{
+    display: inline-block;
+  }
+}

assets/css/reset.css

@@ -0,0 +1,887 @@
+@charset "utf-8";
+/* css reset www.admin10000.com */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;}
+body { background: #F9F9F9; color:#282828; font-size:14px;font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑,Arial', 'sans-serif';}
+/*td,th,caption { font-size:62.5%; }*/
+h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
+address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
+a { color:#555; text-decoration:none; }
+a:hover { text-decoration:none; }
+img { border:none; }
+ol,ul,li { list-style:none; }
+input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
+button{cursor: pointer;outline: none;}
+table { border-collapse:collapse; }
+/*html {overflow-y: scroll;}*/
+html{
+  width: 100%;
+  height: 100%;
+}
+body{
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.ml15{
+  margin-left: 15px!important;
+}
+/* css common */
+.clearfix:after, .clearfix:before {content: ""; display: block; height:0; clear:both; visibility: hidden;}
+.clearfix { *zoom:1; }
+.pull-left{float: left;}
+.pull-right{float: right;}
+header, section, footer, aside, nav, main, article, figure {
+  display: block;
+}
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+/*按钮样式1*/
+.set_2_button{position: relative;transition: all 1s;overflow:hidden;}
+.set_2_button:before{content: "→";position: absolute;left: -100%;transition: all 0.5s;}
+.set_2_button span{display: inline-block;transition: all 0.5s;}
+.set_2_button:hover:before {left: 48%;transition: all 1s;}
+.set_2_button:hover > span {transform: translateX(300%);transition: all 1s;}
+/*按钮样式2*/
+.set_4_button1 {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+}
+.set_4_button1.raised {
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -webkit-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #666666;
+}
+.set_4_button1.raised:active {
+  background: #515151;
+  box-shadow: 0px 1px 1px #063e6b;
+}
+.anim {
+  -moz-transform: translateY(-50%) translateX(-50%);
+  -ms-transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  transform: translateY(-50%) translateX(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+}
+.anim:before {
+  position: relative;
+  content: '';
+  display: block;
+  margin-top: 100%;
+}
+.anim:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 50%;
+}
+
+.clickable .toggle:checked + .anim {
+  -moz-animation: anim-in 0.75s;
+  -webkit-animation: anim-in 0.75s;
+  animation: anim-in 0.75s;
+}
+.clickable .toggle:checked + .anim:after {
+  -moz-animation: anim-in-pseudo 0.75s;
+  -webkit-animation: anim-in-pseudo 0.75s;
+  animation: anim-in-pseudo 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+
+.hoverable:hover > .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.hoverable:hover > .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+@-webkit-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-webkit-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+.anim {
+  -moz-transform: translateY(-50%) translateX(-50%);
+  -ms-transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  transform: translateY(-50%) translateX(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+}
+.anim:before {
+  position: relative;
+  content: '';
+  display: block;
+  margin-top: 100%;
+}
+.anim:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 50%;
+}
+
+.clickable .toggle:checked + .anim {
+  -moz-animation: anim-in 0.75s;
+  -webkit-animation: anim-in 0.75s;
+  animation: anim-in 0.75s;
+}
+.clickable .toggle:checked + .anim:after {
+  -moz-animation: anim-in-pseudo 0.75s;
+  -webkit-animation: anim-in-pseudo 0.75s;
+  animation: anim-in-pseudo 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+
+.hoverable:hover > .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.hoverable:hover > .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+@-webkit-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-webkit-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+.anim {
+  -moz-transform: translateY(-50%) translateX(-50%);
+  -ms-transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  transform: translateY(-50%) translateX(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+}
+.anim:before {
+  position: relative;
+  content: '';
+  display: block;
+  margin-top: 100%;
+}
+.anim:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 50%;
+}
+
+.clickable .toggle:checked + .anim {
+  -moz-animation: anim-in 0.75s;
+  -webkit-animation: anim-in 0.75s;
+  animation: anim-in 0.75s;
+}
+.clickable .toggle:checked + .anim:after {
+  -moz-animation: anim-in-pseudo 0.75s;
+  -webkit-animation: anim-in-pseudo 0.75s;
+  animation: anim-in-pseudo 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+
+.hoverable:hover > .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.hoverable:hover > .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+@-webkit-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-webkit-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+.anim {
+  -moz-transform: translateY(-50%) translateX(-50%);
+  -ms-transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  transform: translateY(-50%) translateX(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+}
+.anim:before {
+  position: relative;
+  content: '';
+  display: block;
+  margin-top: 100%;
+}
+.anim:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 50%;
+}
+
+.clickable .toggle:checked + .anim {
+  -moz-animation: anim-in 0.75s;
+  -webkit-animation: anim-in 0.75s;
+  animation: anim-in 0.75s;
+}
+.clickable .toggle:checked + .anim:after {
+  -moz-animation: anim-in-pseudo 0.75s;
+  -webkit-animation: anim-in-pseudo 0.75s;
+  animation: anim-in-pseudo 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.clickable .toggle:not(:checked) + .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+
+.hoverable:hover > .anim {
+  -moz-animation: anim-out 0.75s;
+  -webkit-animation: anim-out 0.75s;
+  animation: anim-out 0.75s;
+}
+.hoverable:hover > .anim:after {
+  -moz-animation: anim-out-pseudo 0.75s;
+  -webkit-animation: anim-out-pseudo 0.75s;
+  animation: anim-out-pseudo 0.75s;
+}
+@-webkit-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-in {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-in-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-webkit-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-moz-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-ms-keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes anim-out {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@-webkit-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-moz-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes anim-out-pseudo {
+  0% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    background: transparent;
+  }
+}
+/*but样式3*/
+.set_8_button {
+  display: inline-block;
+  transition: background 300ms;
+}
+.set_8_button.outline {
+  overflow: hidden;
+  position: relative;
+}
+.set_8_button.outline:before, .set_8_button.outline:after, .set_8_button.outline .lines:before,
+.set_8_button.outline .lines:after {
+  background-color: #cccccc;
+  content: "";
+  height: 1px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transition: transform 300ms;
+  width: 100%;
+}
+.set_8_button.outline:before {
+  bottom: 0;
+  top: auto;
+}
+.set_8_button.outline .lines {
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.set_8_button.outline .lines:before, .set_8_button.outline .lines:after {
+  height: 100%;
+  width:1px;
+}
+.set_8_button.outline .lines:after {
+  left: auto;
+  right: 0;
+}
+.set_8_button:hover:before {
+  transform: translateX(-100%);
+}
+.set_8_button:hover:after {
+  transform: translateX(100%);
+}
+.set_8_button:hover .lines:before {
+  transform: translateY(-100%);
+}
+.set_8_button:hover .lines:after {
+  transform: translateY(100%);
+}
+/*but样式4*/
+.set_5_button {
+  overflow: hidden;
+  z-index: 1;
+  position: relative;
+}
+.set_5_button:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 500%;
+  height: 1000%;
+  background: #000;
+  filter:alpha(opacity=10);
+  opacity: 0.1;
+  z-index: -1;
+  transform-origin: 0% 0%;
+  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
+  transform: translateY(10%) translateX(16%) rotate(-45deg);
+  transition: transform .3s;
+}
+.set_5_button:hover::after {
+  transform: translateY(10%) translateX(-25px) rotate(-45deg);
+}
+.mask{background-color:#000;opacity:0.5;filter:alpha(opacity=50);position:fixed;top:0;right: 0;left:0;bottom:0;z-index:66;}
+.line1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.line2{word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.line4{word-break:break-all;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}