@jx3box/jx3box-common-ui 5.3.5 → 5.3.9

package/assets/css/box.less

@@ -122,10 +122,37 @@
         height: calc(100vh - @header-height);
     }
 }
-@media screen and (max-width:375px){
+
+@media screen and (max-width:@phone){
+    .c-jx3box{
+        .u-list{
+            display: flex;
+            flex-wrap: wrap;
+            padding-right:10px;
+            li{
+                .w(25%);
+                .mr(0);
+                // flex:1;
+            }
+        }
+        .u-item{
+            .mr(20px);
+            .u-txt{
+                .fz(10px);
+            }
+            .u-pic{
+                .size(28px);
+            }
+        }
+        li:nth-child(4n) .u-item{
+            .mr(0) !important;
+        }
+    }
+}
+@media screen and (max-width:320px){
     .c-jx3box{
         .u-item{
-            .size(64px);
+            .size(60px);
             .u-txt{
                 .fz(10px);
             }

package/assets/data/clients.json

@@ -0,0 +1,5 @@
+{
+    "std": "正式服",
+    "origin": "怀旧服",
+    "all": "双端"
+}

package/assets/data/panel.json

@@ -20,12 +20,12 @@
         "onlyAdmin":false
     },
     {
-        "label": "海报管理",
-        "link": "/admin",
+        "label": "全局设置",
+        "link": "/config",
         "onlyAdmin":true
     },
     {
-        "label": "内容管理",
+        "label": "后台管理",
         "link": "https://os.jx3box.com/admin",
         "onlyAdmin":true
     }

package/assets/img/list/post.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 16" width="12" height="16" aria-hidden="true" fill="#555555"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>

package/assets/img/single/author.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true" fill="#444444"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>

package/assets/img/single/lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 16" version="1.1" width="12" height="16" fill="#dbab09"><path fill-rule="evenodd" d="M4 13H3v-1h1v1zm8-6v7c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h1V4c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1c.55 0 1 .45 1 1zM3.8 6h4.41V4c0-1.22-.98-2.2-2.2-2.2-1.22 0-2.2.98-2.2 2.2v2H3.8zM11 7H2v7h9V7zM4 8H3v1h1V8zm0 2H3v1h1v-1z"></path></svg>

package/assets/img/single/modate.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="485.213px" height="485.212px" viewBox="0 0 485.213 485.212" style="enable-background:new 0 0 485.213 485.212;" fill="#555555"
+	 xml:space="preserve">
+<g>
+	<path d="M60.652,75.816V15.163C60.652,6.781,67.433,0,75.817,0c8.38,0,15.161,6.781,15.161,15.163v60.653
+		c0,8.38-6.781,15.161-15.161,15.161C67.433,90.978,60.652,84.196,60.652,75.816z M318.424,90.978
+		c8.378,0,15.163-6.781,15.163-15.161V15.163C333.587,6.781,326.802,0,318.424,0c-8.382,0-15.168,6.781-15.168,15.163v60.653
+		C303.256,84.196,310.042,90.978,318.424,90.978z M485.212,363.906c0,66.996-54.312,121.307-121.303,121.307
+		c-66.986,0-121.302-54.311-121.302-121.307c0-66.986,54.315-121.3,121.302-121.3C430.9,242.606,485.212,296.919,485.212,363.906z
+		 M454.89,363.906c0-50.161-40.81-90.976-90.98-90.976c-50.166,0-90.976,40.814-90.976,90.976c0,50.171,40.81,90.98,90.976,90.98
+		C414.08,454.886,454.89,414.077,454.89,363.906z M121.305,181.955H60.652v60.651h60.653V181.955z M60.652,333.584h60.653V272.93
+		H60.652V333.584z M151.629,242.606h60.654v-60.651h-60.654V242.606z M151.629,333.584h60.654V272.93h-60.654V333.584z
+		 M30.328,360.891V151.628h333.582v60.653h30.327V94c0-18.421-14.692-33.349-32.843-33.349h-12.647v15.166
+		c0,16.701-13.596,30.325-30.322,30.325c-16.731,0-30.326-13.624-30.326-30.325V60.651H106.14v15.166
+		c0,16.701-13.593,30.325-30.322,30.325c-16.733,0-30.327-13.624-30.327-30.325V60.651H32.859C14.707,60.651,0.001,75.579,0.001,94
+		v266.892c0,18.36,14.706,33.346,32.858,33.346h179.424v-30.331H32.859C31.485,363.906,30.328,362.487,30.328,360.891z
+		 M303.256,242.606v-60.651h-60.648v60.651H303.256z M409.399,363.906h-45.49v-45.49c0-8.377-6.781-15.158-15.163-15.158
+		s-15.159,6.781-15.159,15.158v60.658c0,8.378,6.777,15.163,15.159,15.163h60.653c8.382,0,15.163-6.785,15.163-15.163
+		C424.562,370.692,417.781,363.906,409.399,363.906z"/>
+</g>
+</svg>

package/assets/img/single/podate.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#6a737d"
+	 viewBox="0 0 485.2 485.2" style="enable-background:new 0 0 485.2 485.2;" xml:space="preserve">
+<g>
+	<path d="M60.7,75.8V15.2C60.7,6.8,67.4,0,75.8,0C84.2,0,91,6.8,91,15.2v60.7C91,84.2,84.2,91,75.8,91C67.4,91,60.7,84.2,60.7,75.8z
+		"/>
+	<path d="M318.4,91c8.4,0,15.2-6.8,15.2-15.2V15.2c0-8.4-6.8-15.2-15.2-15.2c-8.4,0-15.2,6.8-15.2,15.2v60.7
+		C303.3,84.2,310,91,318.4,91z"/>
+	<rect x="60.7" y="182" width="60.7" height="60.7"/>
+	<rect x="60.7" y="272.9" width="60.7" height="60.7"/>
+	<rect x="151.6" y="182" width="60.7" height="60.7"/>
+	<rect x="151.6" y="272.9" width="60.7" height="60.7"/>
+	<path d="M30,361.2v-210h334c0.2,70.7,0.4,141.4,0.7,212.1c9.8,0,19.6-0.1,29.3-0.1c0-89.9,0-179.7,0-269.6
+		c0-18.5-14.5-33.4-32.5-33.4H349v15.2c0,16.7-13.7,30.3-30.5,30.3c-16.8,0-30.5-13.6-30.5-30.3V60.2H106v15.2
+		c0,16.7-13.7,30.3-30.5,30.3C58.7,105.7,45,92.1,45,75.4V60.2H32.5C14.5,60.2,0,75.2,0,93.6v267.2c0,9.2,3.6,17.5,9.5,23.6
+		c7.8,8.1,18.5,9.3,23,9.8c22.1,2.4,165.3,2.9,361.5,1c0-10.7,0-21.3,0-32c-120.5,0.3-241,0.7-361.5,1
+		C31.7,363.2,30.8,362.2,30,361.2z"/>
+	<path d="M420.3,387.9"/>
+	<rect x="242.6" y="182" width="60.6" height="60.7"/>
+	<rect x="242.6" y="272.9" width="60.7" height="60.7"/>
+</g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.3.5",
+    "version": "5.3.9",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -30,7 +30,7 @@
         "last 2 versions"
     ],
     "dependencies": {
-        "@jx3box/jx3box-common": "^6.7.2",
+        "@jx3box/jx3box-common": "^6.7.8",
         "@jx3box/jx3box-data": "^1.8.3",
         "axios": "^0.19.2",
         "element-ui": "^2.13.2",

package/src/App.vue

@@ -20,7 +20,7 @@
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
-            
+            <PostHeader :post="post"/>
             
             <Creators :postId="30432" style="margin-bottom:10px"/>
             <Collection :id="59" :defaultVisible="true"/>
@@ -105,6 +105,8 @@ import RightSideMsg from "./RightSideMsg.vue";
 import Footer from "./Footer.vue";
 import Bottom from "./Bottom.vue";
 
+import PostHeader from "./single/PostHeader.vue";
+
 import Thx from "./single/Thx.vue";
 import Collection from "./single/Collection.vue";
 import Creators from "./single/Creators.vue";
@@ -145,6 +147,8 @@ export default {
         Bottom,
         RightSidebar,
 
+        PostHeader,
+
         Thx,
         Collection,
         Creators,
@@ -182,6 +186,8 @@ export default {
             wikiPost: null,
             tag : '',
             visible : false,
+
+            post : ''
         };
     },
     created: function() {
@@ -191,6 +197,9 @@ export default {
                 if (res.code === 200) this.wikiPost = res.data;
             }
         );
+        axios.get('/api/cms/post/32035').then((res) => {
+            this.post = res.data.data
+        })
     },
     methods: {
         addUser : function (val){
@@ -199,3 +208,9 @@ export default {
     },
 };
 </script>
+
+<style lang="less">
+    body{
+        padding-top:0;
+    }
+</style>

package/src/Author.vue

@@ -78,7 +78,7 @@
             </div>
             <div class="u-medals" v-if="medals && medals.length">
                 <span class="u-medal" v-for="(item, i) in medals" :key="i">
-                    <img :src="item.medal | showTeamMedal" :title="medal_map[item.medal]" />
+                    <img :src="item.medal | showMedalIcon" :title="item | showMedalDesc" />
                 </span>
             </div>
         </div>
@@ -179,8 +179,11 @@ export default {
         },
     },
     filters: {
-        showTeamMedal: function (val) {
-            return __imgPath + "image/medals/team/" + val + ".gif";
+        showMedalIcon: function (val) {
+            return __imgPath + "image/medals/user/" + val + ".gif";
+        },
+        showMedalDesc : function (item){
+            return item.medal_desc || medal_map[item.medal]
         },
         authorLink,
         weiboLink: function (val) {

package/src/bread/Admin.vue

@@ -10,14 +10,16 @@
         v-if="hasRight"
     >
         <div class="c-admin-wrapper">
-            <el-divider content-position="left">状态变更</el-divider>
-            <el-radio-group v-model="post_status" size="small" class="c-admin-status">
-                <el-radio-button
-                    v-for="(option, key) in status_options"
-                    :label="key"
-                    :key="key"
-                >{{ option }}</el-radio-button>
-            </el-radio-group>
+            <template v-if="isAdmin">
+                <el-divider content-position="left">状态变更</el-divider>
+                <el-radio-group v-model="post_status" size="small" class="c-admin-status">
+                    <el-radio-button
+                        v-for="(option, key) in status_options"
+                        :label="key"
+                        :key="key"
+                    >{{ option }}</el-radio-button>
+                </el-radio-group>
+            </template>
 
             <el-divider content-position="left">可见性变更</el-divider>
             <el-radio-group v-model="visible" size="small" class="c-admin-status">
@@ -140,6 +142,7 @@ export default {
             status_options: {
                 publish: "默认",
                 draft: "草稿",
+                pending: "待审核",
                 dustbin: "删除",
             },
             visible: "0",
@@ -192,6 +195,9 @@ export default {
                 sticky: this.isSticky ? Date.now() : null,
             };
         },
+        isAdmin : function (){
+            return User.isAdmin()
+        }
     },
     methods: {
         // 是否有权限

package/src/header/nav.vue

@@ -1,6 +1,6 @@
 <template>
     <nav class="c-header-nav" v-if="finalNav">
-        <div class="u-item-box" v-for="item in finalNav" :key="item.key">
+        <div class="u-item-box" v-for="item in finalNav" :key="'header-nav-' + item.key">
             <template
                 v-if="item.status && item.children && item.children.length"
             >

package/src/header/user.vue

@@ -6,8 +6,15 @@
                 <el-tooltip effect="dark" content="我的消息" placement="bottom">
                     <a class="u-msg" :href="url.msg">
                         <i class="u-icon u-icon-msg">
-                            <i class="u-pop" style="display: none;" v-show="pop"></i>
-                            <img svg-inline src="../../assets/img/header/msg.svg" />
+                            <i
+                                class="u-pop"
+                                style="display: none"
+                                v-show="pop"
+                            ></i>
+                            <img
+                                svg-inline
+                                src="../../assets/img/header/msg.svg"
+                            />
                         </i>
                     </a>
                 </el-tooltip>
@@ -17,14 +24,22 @@
             <div class="c-header-panel" id="c-header-panel">
                 <el-tooltip effect="dark" content="发布中心" placement="bottom">
                     <a class="u-post" :href="url.publish">
-                        <img class="u-add" svg-inline src="../../assets/img/header/add.svg" />
+                        <img
+                            class="u-add"
+                            svg-inline
+                            src="../../assets/img/header/add.svg"
+                        />
                     </a>
                 </el-tooltip>
             </div>
 
             <!-- user info -->
             <div class="c-header-info">
-                <div class="c-header-profile" id="c-header-profile" @click="showmenu">
+                <div
+                    class="c-header-profile"
+                    id="c-header-profile"
+                    @click="showmenu"
+                >
                     <img class="u-avatar" :src="user.avatar" />
                     <span class="u-dropdown"></span>
                     <ul class="u-menu" v-show="!fold">
@@ -47,14 +62,17 @@
                                 href="/vip/premium?from=header_usermenu"
                                 target="_blank"
                             >
-                                <i class="i-icon-vip" :class="{ on: isVIP || isPRO }">{{ vipType }}</i>
+                                <i
+                                    class="i-icon-vip"
+                                    :class="{ on: isVIP || isPRO }"
+                                    >{{ vipType }}</i
+                                >
                                 <span class="u-vip-type">
                                     <template v-if="isVIP || isPRO">
-                                        {{ vipTypeTxt
-                                        }}
-                                        <span
-                                            class="u-vip-left"
-                                        >({{ vipLeftDays }}天)</span>
+                                        {{ vipTypeTxt }}
+                                        <span class="u-vip-left"
+                                            >({{ vipLeftDays }}天)</span
+                                        >
                                     </template>
                                     <template v-else>升级账号类型</template>
                                 </span>
@@ -63,7 +81,10 @@
                         </li>
                         <hr />
                         <template v-for="(item, i) in panel">
-                            <li :key="'panel-' + i" v-if="isEditor || !item.onlyAdmin">
+                            <li
+                                :key="'panel-' + i"
+                                v-if="isEditor || !item.onlyAdmin"
+                            >
                                 <a :href="item.link">{{ item.label }}</a>
                             </li>
                         </template>
@@ -104,7 +125,7 @@ export default {
     data: function () {
         return {
             panel,
-            isEditor : false,
+            isEditor: false,
 
             // 是否有消息
             pop: false,
@@ -200,7 +221,7 @@ export default {
             });
         },
         loadPanel: function () {
-            getMenu('panel').then((res) => {
+            getMenu("panel").then((res) => {
                 this.panel = res.data?.data?.val || panel;
             });
         },
@@ -237,7 +258,7 @@ export default {
         // 初始化
         init: function () {
             if (this.isLogin) {
-                this.isEditor = User.isEditor()
+                this.isEditor = User.isEditor();
                 this.checkMSG();
                 this.loadPanel();
                 this.loadAsset();

package/src/interact/boxcoin_admin.vue

@@ -76,6 +76,9 @@ export default {
         },
         allowBoxcoin : function (){
             return this.postType && this.postId && this.userId
+        },
+        client : function (){
+            return location.href.includes('origin') ? 'origin' : 'std'
         }
     },
     watch: {
@@ -90,6 +93,7 @@ export default {
         submit: function () {
             grantBoxcoin(this.postType, this.postId, this.userId, this.count, {
                 remark: this.remark,
+                client : this.client
             })
                 .then((res) => {
                     this.$message({

package/src/interact/boxcoin_user.vue

@@ -75,6 +75,9 @@ export default {
         },
         allowBoxcoin : function (){
             return this.postType && this.postId && this.userId
+        },
+        client : function (){
+            return location.href.includes('origin') ? 'origin' : 'std'
         }
     },
     watch: {
@@ -93,6 +96,7 @@ export default {
         submit: function () {
             rewardBoxcoin(this.postType, this.postId, this.userId, this.count, {
                 remark: this.remark,
+                client : this.client
             })
                 .then((res) => {
                     this.$message({

package/src/single/Collection.vue

@@ -4,7 +4,7 @@
             <span>
                 <i class="el-icon-notebook-1"></i> 该作品已被收录至作者的剑三小册
             </span>
-            <a @click.stop :href="id | collectionLink">《{{ title }}》</a>
+            <a @click.stop :href="id | collectionLink" target="_blank">《{{ title }}》</a>
         </div>
         <transition name="fade">
             <div class="w-collection-list" v-if="visible">

package/src/single/PostContents.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="m-single-contents">
+        <!-- TODO: -->
+    </div>
+</template>
+
+<script>
+export default {
+   name : 'PostContents',
+   props:[],
+   components : {},
+   data : function(){
+       return {
+           
+       }
+   },
+   computed:{},
+   watch:{},
+   methods:{},
+   filters:{},
+   created:function(){},
+   mounted:function(){},
+}
+</script>

package/src/single/PostHeader.vue

@@ -0,0 +1,328 @@
+<template>
+    <header class="m-single-header" v-if="post">
+        <!-- 标题 -->
+        <div class="m-single-title">
+            <span class="u-title u-sub-block" :href="url" :title="title">
+                <i class="u-original" v-if="isOriginal">原创</i>
+                <i class="u-private" v-if="post.post_status != 'publish'">
+                    <i class="el-icon-lock" v-if="post.post_status == 'draft' || post.post_status == 'pending' || ~~post.visible" style="color:#fb9b24"></i>
+                    <i class="el-icon-delete" v-if="post.post_status == 'dustbin'" style="color:#c00"></i>
+                </i>
+                <span class="u-title-text">{{ title }}</span>
+            </span>
+        </div>
+
+        <!-- 信息 -->
+        <div class="m-single-info">
+            <!-- 用户名 -->
+            <div class="u-author u-sub-block">
+                <i class="u-author-icon">
+                    <img svg-inline src="../../assets/img/single/author.svg" />
+                </i>
+                <a class="u-name" :href="author_link">{{ author_name }}</a>
+            </div>
+
+            <!-- 自定义字段 -->
+            <!-- <template v-if="metas && metas.length">
+            <div class="u-meta u-sub-block" v-for="(meta_value,meta_key) in metas" :key="meta_key">
+                <em class="u-label">{{meta_key}}</em>
+                <span class="u-value">{{meta_value}}</span>
+            </div>
+            </template> -->
+            <slot></slot>
+
+            <!-- 客户端 -->
+            <div class="u-meta u-sub-block">
+                <em class="u-label">适用客户端</em>
+                <span class="u-value u-client" :class="client">{{ client | showClientLabel }}</span>
+            </div>
+
+            <!-- 发布日期 -->
+            <span class="u-podate u-sub-block"  :title="'发布日期:' + post_time">
+                <i class="u-icon-podate">
+                    <img svg-inline src="../../assets/img/single/podate.svg" />
+                </i>
+                <time>{{ post_date }}</time>
+            </span>
+
+            <!-- 最后更新 -->
+            <span class="u-modate u-sub-block" :title="'最后更新:' + update_time">
+                <i class="u-icon-modate">
+                    <img svg-inline src="../../assets/img/single/modate.svg" />
+                </i>
+                <time>{{ update_date }}</time>
+            </span>
+
+            <!-- 查看次数 -->
+            <span class="u-views u-sub-block">
+                <i class="el-icon-view"></i>
+                {{ views }}
+            </span>
+
+            <!-- 编辑 -->
+            <a class="u-edit u-sub-block" :href="edit_link" v-if="canEdit">
+                <i class="u-icon-edit el-icon-edit-outline"></i>
+                <span>编辑</span>
+            </a>
+        </div>
+    </header>
+</template>
+
+<script>
+import { __Root } from "@jx3box/jx3box-common/data/jx3box.json";
+import { showDate, showTime } from "@jx3box/jx3box-common/js/moment";
+import { editLink, authorLink } from "@jx3box/jx3box-common/js/utils.js";
+import User from "@jx3box/jx3box-common/js/user.js";
+import client_map from "../../assets/data/clients.json";
+export default {
+    name: "single-header",
+    props: ["post", "stat"],
+    data: function() {
+        return {};
+    },
+    computed: {
+        url: function() {
+            return location.href;
+        },
+        isOriginal: function() {
+            return !!~~this.post?.original;
+        },
+        title: function() {
+            return this.post?.post_title || "无标题";
+        },
+        author_link: function() {
+            return authorLink(this.post?.post_author);
+        },
+        author_name: function() {
+            return this.post?.author || "匿名";
+        },
+        post_date: function() {
+            return showDate(new Date(this.post?.post_date));
+        },
+        update_date: function() {
+            return showDate(new Date(this.post?.post_modified));
+        },
+        post_time: function() {
+            return showTime(new Date(this.post?.post_date));
+        },
+        update_time: function() {
+            return showTime(new Date(this.post?.post_modified));
+        },
+        views: function() {
+            return this.stat?.views || "-";
+        },
+        edit_link: function() {
+            return editLink(this.post?.post_type, this.post?.ID);
+        },
+        canEdit: function() {
+            return this.post?.post_author == User.getInfo().uid || User.isEditor();
+        },
+        client: function() {
+            return this.post?.client || "std";
+        },
+    },
+    methods: {},
+    mounted: function() {},
+    filters: {
+        showClientLabel: function(val) {
+            return client_map[val];
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-single-header {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 280px;
+    .pr;
+    .u-sub-block {
+        .dbi;
+        .y(top);
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-single-header {
+        padding-right: 0;
+    }
+}
+@media print {
+    .m-single-header {
+        padding-right: 0;
+    }
+}
+
+.m-single-title {
+    .fz(32px);
+    padding: 1px 0;
+
+    .u-title {
+        color: @color;
+        // &:hover {
+        //     color: @primary;
+        // }
+        letter-spacing: 0.5px;
+        font-weight: 300;
+        .db;
+        .nobreak;
+    }
+    .u-author {
+        .pr;
+    }
+
+    .u-original {
+        background-color: #6f42c1;
+        color: #fff;
+        .fz(14px, 20px);
+        font-style: normal;
+        font-weight: normal;
+        padding: 2px 5px;
+        .mr(5px);
+        // .fl;
+    }
+
+    .u-private {
+        .y(-2px);
+        margin-right: 5px;
+        color: #111;
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-single-title {
+        .fz(1rem, 1.8);
+        .u-title {
+            word-break: break-all;
+            white-space: normal;
+            font-weight: normal;
+        }
+    }
+}
+@media print {
+    .m-single-title {
+        .x;
+    }
+}
+
+.m-single-info {
+    margin-top: 10px;
+    .clearfix;
+    .fz(12px, 20px);
+    color: #666;
+
+    @origin: #0eb7ce;
+    @std: #f0b400;
+    @all: #a26ef7;
+
+    .u-client {
+        // .fl;
+        font-style: normal;
+        .fz(12px);
+        padding: 0px 5px;
+        .r(3px);
+        // .mr(10px);
+
+        &.std {
+            border: 1px solid @std;
+            color: @std;
+        }
+
+        &.origin {
+            border: 1px solid @origin;
+            color: @origin;
+        }
+
+        &.all {
+            border: 1px solid @all;
+            color: @all;
+        }
+    }
+
+    * {
+        .dbi;
+    }
+
+    svg {
+        fill: #666;
+        .size(16px);
+        .y;
+        .mr(3px);
+    }
+
+    .u-sub-block {
+        .mr(15px);
+        .fl;
+    }
+
+    .u-author {
+        a:hover {
+            box-shadow: 0 1px 0 @color-link;
+        }
+        i {
+            .pr;
+            top: -2px;
+        }
+    }
+
+    .u-label {
+        .mr(5px);
+        background-color: #eee;
+        padding: 0 5px;
+        .r(2px);
+        font-style: normal;
+    }
+    .u-value {
+    }
+
+    .u-views {
+        i {
+            .fz(15px);
+            .y;
+        }
+    }
+
+    .u-edit {
+        i {
+            &:before {
+                font-size: 16px;
+            }
+            .pr;
+            top: 2px;
+            .mr(3px);
+        }
+        &:hover {
+            box-shadow: 0 1px 0 @color-link;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .m-single-info {
+        .u-meta {
+            .none;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-single-info {
+        .u-podate {
+            .none;
+        }
+    }
+}
+@media print {
+    .m-single-info {
+        .u-meta,
+        .u-views,
+        .u-edit {
+            .none;
+        }
+        .x;
+        .u-sub-block {
+            float: none;
+        }
+        .u-name {
+            color: @color;
+        }
+    }
+}
+</style>