提交

src/api/index.js

@@ -922,3 +922,39 @@ export function getContentPage(data) {
     data,
   });
 }
+/**
+ * 获取大数据平台新用户留存分析 表格；
+ * @return {AxjxPromise}
+ */
+export function getKeepPage(data) {
+  return ajax({
+    urlType: "leverAudience",
+    url: "/cxzx-program/new-media/user/keep",
+    method: "POST",
+    data,
+  });
+}
+/**
+ * 获取大数据平台新用户留存分析 表格；
+ * @return {AxjxPromise}
+ */
+export function getSearchPage(data) {
+  return ajax({
+    urlType: "leverAudience",
+    url: "/cxzx-program/new-media/search/list",
+    method: "POST",
+    data,
+  });
+}
+/**
+ * 获取大数据平台新用户留存分析 top10；
+ * @return {AxjxPromise}
+ */
+export function getSearchTop10(data) {
+  return ajax({
+    urlType: "leverAudience",
+    url: "/cxzx-program/new-media/search/top10",
+    method: "POST",
+    data,
+  });
+}

src/components/counto/vue-countTo.vue

@@ -15,7 +15,7 @@ export default {
     endVal: {
       type: Number,
       required: false,
-      default: 2017
+      default: 0
     },
     duration: {
       type: Number,

src/router/index.js

@@ -145,7 +145,7 @@ const routes = [
     path: "/version",
     name: "Version",
     component: () =>
-      import(/* webpackChunkName: "Search" */ "../views/Version/index.vue"),
+      import(/* webpackChunkName: "Version" */ "../views/Version/index.vue"),
   },
 
   countryRouter, // 全国数据

src/views/Content/index.vue

@@ -446,6 +446,8 @@ export default {
             let keyList = [],
               valueList = [],
               titles = [];
+            if ((resChart || []).length && chart && chart.clear)
+              return chart.clear();
             for (let o = 0; o < (resChart || []).length; o++) {
               const item = (resChart || [])[o];
               keyList.push(item.dt);
@@ -687,7 +689,13 @@ export default {
         this.form.version == -1 ? undefined : this.form.version.join(",");
       const contentType = this.lastParams.contentType || this.form.contentType;
       let url =
-        config.base.leverAudience + "/cxzx-program/new-media/content/export?start=" + S + "&end=" + E +"&app=" + app;
+        config.base.leverAudience +
+        "/cxzx-program/new-media/content/export?start=" +
+        S +
+        "&end=" +
+        E +
+        "&app=" +
+        app;
       version && (url += "&version=" + version);
       contentType && (url += "&contentType=" + contentType);
       window.open(url);

src/views/Keep/index.vue

@@ -83,63 +83,262 @@
         </el-form-item>
         <el-form-item style="float: right">
           <el-button type="primary" @click="onSubmit">查询</el-button>
-          <el-button type="primary" @click="onExport">导出</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <br />
     <el-card class="box-card">
+      <div style="text-align: right">
+        <el-button-group>
+          <el-button
+            @click="() => keepTypeChange(2)"
+            size="small"
+            :type="form.keepType === 2 ? 'primary' : 'plain'"
+          >
+            留存率
+          </el-button>
+          <el-button
+            @click="() => keepTypeChange(1)"
+            size="small"
+            :type="form.keepType === 1 ? 'primary' : 'plain'"
+          >
+            用户数
+          </el-button>
+        </el-button-group>
+          <el-button size="small" style="margin-left: .5em;" type="primary" @click="onExport">导出</el-button>
+      </div>
+      <br />
       <el-table
         v-if="this.oriData && this.oriData.list && this.oriData.list.length"
         :data="showList"
         style="width: 100%"
         :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
       >
-        <el-table-column prop="dt" label="日期" />
-        <el-table-column prop="activeUser" label="活跃用户">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="dt"
+          label="日期"
+        />
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r0"
+          label="新增用户数"
+        >
           <template #default="scope">
             <countTo
-              :startVal="scope.row.activeUser"
-              :endVal="scope.row.activeUser"
+              :startVal="scope.row.r0"
+              :endVal="scope.row.r0"
               :duration="100"
             ></countTo>
           </template>
         </el-table-column>
-        <el-table-column prop="newUser" label="新增用户">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r1"
+          label="第1天"
+        >
           <template #default="scope">
-            <countTo
-              :startVal="scope.row.newUser"
-              :endVal="scope.row.newUser"
-              :duration="100"
-            ></countTo>
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r1
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r1"
+                :endVal="scope.row.r1"
+                :duration="100"
+              ></countTo>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="totalUser" label="累计用户">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r2"
+          label="第2天"
+        >
           <template #default="scope">
-            <countTo
-              :startVal="scope.row.totalUser"
-              :endVal="scope.row.totalUser"
-              :duration="100"
-            ></countTo>
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r2
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r2"
+                :endVal="scope.row.r2"
+                :duration="100"
+              ></countTo>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="startTimes" label="启动次数">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r3"
+          label="第3天"
+        >
           <template #default="scope">
-            <countTo
-              :startVal="scope.row.startTimes"
-              :endVal="scope.row.startTimes"
-              :duration="100"
-            ></countTo>
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r3
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r3"
+                :endVal="scope.row.r3"
+                :duration="100"
+              ></countTo>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r4"
+          label="第4天"
+        >
+          <template #default="scope">
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r4
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r4"
+                :endVal="scope.row.r4"
+                :duration="100"
+              ></countTo>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r5"
+          label="第5天"
+        >
+          <template #default="scope">
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r5
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r5"
+                :endVal="scope.row.r5"
+                :duration="100"
+              ></countTo>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r6"
+          label="第6天"
+        >
+          <template #default="scope">
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r6
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r6"
+                :endVal="scope.row.r6"
+                :duration="100"
+              ></countTo>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="duration" label="人均使用时长">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r7"
+          label="第7天"
+        >
           <template #default="scope">
-            {{ timeFormat(scope.row.durationUser) }}
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r6
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r6"
+                :endVal="scope.row.r6"
+                :duration="100"
+              ></countTo>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="duration" label="次均使用时长">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r15"
+          label="第15天"
+        >
           <template #default="scope">
-            {{ timeFormat(scope.row.durationTimes) }}
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r15
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r15"
+                :endVal="scope.row.r15"
+                :duration="100"
+              ></countTo>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="r30"
+          label="第30天"
+        >
+          <template #default="scope">
+            <div
+              class="keepNmuber"
+              :style="
+                scope.row.r30
+                  ? 'background-color: #69c0ff;color: #fff'
+                  : 'background-color: #ebf0ff;color: #ddd'
+              "
+            >
+              <countTo
+                :startVal="scope.row.r30"
+                :endVal="scope.row.r30"
+                :duration="100"
+              ></countTo>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -158,7 +357,7 @@
 
 <script>
 // @ is an alias to /src
-import { getRule, getAppList, getHistory, getSearchData } from "@/api/index";
+import { getRule, getAppList, getKeepPage, getSearchData } from "@/api/index";
 
 import countTo from "@/components/counto/vue-countTo.vue";
 
@@ -172,6 +371,7 @@ export default {
       page: 1,
       form: {
         app: "",
+        keepType: 1,
         version: [],
         channel: [],
         date: [],
@@ -196,6 +396,7 @@ export default {
     this.form = {
       //   app: (this.cycle[0] || { value: "" }).value,
       app: "起点新闻",
+      keepType: 1,
       version: [(this.version[0] || { value: "" }).value],
       channel: [(this.channel[0] || { value: "" }).value],
       date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
@@ -204,6 +405,10 @@ export default {
   },
   computed: {},
   methods: {
+    keepTypeChange(type) {
+        this.form.keepType = type;
+        this.onSubmit();
+    },
     verifyList(list, verify, obj, more) {
       if (!obj) return;
       let li = list || [];
@@ -236,16 +441,17 @@ export default {
     onSubmit() {
       this.lastParams = {
         app: this.form.app,
+        keepType: this.form.keepType,
         start: this.FormData(this.form.date[0]),
         end: this.FormData(this.form.date[1]),
         manufacturer: this.form.channel == -1 ? undefined : this.form.channel,
         version: this.form.version == -1 ? undefined : this.form.version,
       };
-      getHistory(this.lastParams)
+      getKeepPage(this.lastParams)
         .then(r => {
           let oriData = r || {};
           this.oriData = {
-            list: oriData.list || [],
+            list: oriData || [],
           };
           this.page = 1;
           this.pushShowList();
@@ -434,18 +640,23 @@ export default {
               this.form.channel == -1 ? undefined : this.form.channel,
             version: this.form.version == -1 ? undefined : this.form.version,
           };
-      getHistory(p).then(r => {
+      getKeepPage(p).then(r => {
         // 生成数据
         let strcsv =
-          "data:text/csv;charset=utf-8,日期,活跃用户,新增用户,累计用户,人均使用时长,次均使用时长\r\n";
-        (r.list || []).map(v => {
+          "data:text/csv;charset=utf-8,日期,新增用户数,第1天,第2天,第3天,第4天,第5天,第6天,第7天,第15天,第30天\r\n";
+        (r || []).map(v => {
           strcsv += [
             v.dt,
-            v.activeUser,
-            v.newUser,
-            v.totalUser,
-            this.timeFormat(v.durationUser),
-            this.timeFormat(v.durationTimes),
+            v.r0,
+            v.r1,
+            v.r2,
+            v.r3,
+            v.r4,
+            v.r5,
+            v.r6,
+            v.r7,
+            v.r15,
+            v.r30,
             "\r\n",
           ].join(",");
         });
@@ -455,10 +666,11 @@ export default {
         link.setAttribute("href", encodeURI(strcsv));
         link.setAttribute(
           "download",
-          p.app + "用户趋势" + S + "_" + E + ".csv"
+          p.app + "新用户留存" + S + "_" + E + ".csv"
         );
         // document.body.appendChild(link);
         link.click();
+        link = undefined;
       });
     },
   },
@@ -491,4 +703,7 @@ export default {
   color: #396fff;
   font-size: 25px;
 }
+.keepNmuber {
+  padding: 3px 0;
+}
 </style>

src/views/Search/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Content">
+  <div class="Search">
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item>新媒体</el-breadcrumb-item>
       <el-breadcrumb-item>应用分析</el-breadcrumb-item>
@@ -62,23 +62,6 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="内容类型">
-          <el-select
-            collapse-tags
-            clearable
-            v-model="form.content"
-            placeholder="请选择内容"
-          >
-            <el-option
-              v-for="item in content"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.disabled"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item style="float: right">
           <el-button type="primary" @click="onSubmit">查询</el-button>
         </el-form-item>
@@ -87,7 +70,7 @@
     <br />
     <el-card class="box-card">
       <el-row :gutter="20">
-        <el-col :span="6" v-for="(v, i) in top" :key="i + v.name">
+        <el-col :span="8" v-for="(v, i) in top" :key="i + v.name">
           <div class="libTitle" v-text="v.name"></div>
           <el-table
             :data="v.list || []"
@@ -98,17 +81,17 @@
             }"
           >
             <el-table-column
-              prop="title"
+              prop="keyWord"
               header-align="center"
               align="center"
-              label="标题"
+              label="关键词"
               show-overflow-tooltip
             />
             <el-table-column label="次数" header-align="center" align="center">
               <template #default="scope">
                 <countTo
                   :startVal="0"
-                  :endVal="scope.row[v.target] || 0"
+                  :endVal="scope.row.searchTimes || 0"
                   :duration="100"
                 ></countTo>
               </template>
@@ -118,8 +101,7 @@
       </el-row>
       <br />
       <el-row>
-        <el-col :span="8">
-        </el-col>
+        <el-col :span="8"> </el-col>
         <el-col :span="16">
           <el-button
             size="small"
@@ -136,33 +118,20 @@
       <el-table
         :data="table.records || []"
         style="width: 100%"
-        @sort-change="tableChange"
         :header-cell-style="{
           backgroundColor: '#f4f5f7',
           color: '#606266',
         }"
       >
         <el-table-column
-          prop="contentId"
+          prop="keyWord"
           header-align="center"
           align="center"
-          label="内容ID"
+          label="搜索关键词"
           show-overflow-tooltip
         >
           <template #default="scope">
-            <span v-text="scope.row.contentId || '-'"></span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="title"
-          header-align="center"
-          align="center"
-          width="300"
-          label="标题"
-          show-overflow-tooltip
-        >
-          <template #default="scope">
-            <span v-text="scope.row.title || '-'"></span>
+            <span v-text="scope.row.keyWord || '-'"></span>
           </template>
         </el-table-column>
         <el-table-column
@@ -176,104 +145,54 @@
           </template>
         </el-table-column>
         <el-table-column
-          prop="publishTime"
+          prop="classify"
           header-align="center"
           align="center"
-          label="发布时间"
+          label="所属分类"
           show-overflow-tooltip
         >
           <template #default="scope">
-            <span v-text="scope.row.publishTime || '-'"></span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="平均阅读时长"
-          header-align="center"
-          align="center"
-          sortable
-          :sort-orders="['descending', null]"
-          prop="cduration"
-        >
-          <template #default="scope">
-            <span v-text="timeFormat(scope.row.cduration)"></span>
+            <span v-text="scope.row.classify || '-'"></span>
           </template>
         </el-table-column>
         <el-table-column
-          label="阅读次数"
+          label="搜索次数"
           header-align="center"
           align="center"
-          sortable
-          :sort-orders="['descending', null]"
-          prop="cpv"
+          prop="searchTimes"
         >
           <template #default="scope">
             <countTo
-              :startVal="0"
-              :endVal="scope.row.cpv || 0"
-              :duration="100"
+              :startVal="scope.row.searchTimes"
+              :endVal="scope.row.searchTimes"
+              :duration="1"
             ></countTo>
           </template>
         </el-table-column>
         <el-table-column
-          label="点赞次数"
+          label="结果列表点击次数"
           header-align="center"
           align="center"
-          sortable
-          :sort-orders="['descending', null]"
-          prop="csupport"
+          prop="clickTimes"
         >
           <template #default="scope">
             <countTo
-              :startVal="0"
-              :endVal="scope.row.csupport || 0"
-              :duration="100"
+              :startVal="scope.row.clickTimes"
+              :endVal="scope.row.clickTimes"
+              :duration="1"
             ></countTo>
           </template>
         </el-table-column>
         <el-table-column
-          label="收藏次数"
+          label="点击用户数"
           header-align="center"
           align="center"
-          sortable
-          :sort-orders="['descending', null]"
-          prop="ccollect"
+          prop="clickUser"
         >
           <template #default="scope">
             <countTo
-              :startVal="0"
-              :endVal="scope.row.ccollect || 0"
-              :duration="100"
-            ></countTo>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="分享次数"
-          header-align="center"
-          align="center"
-          sortable
-          :sort-orders="['descending', null]"
-          prop="cshare"
-        >
-          <template #default="scope">
-            <countTo
-              :startVal="0"
-              :endVal="scope.row.cshare || 0"
-              :duration="100"
-            ></countTo>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="观看用户数"
-          header-align="center"
-          align="center"
-          sortable
-          :sort-orders="['descending', null]"
-          prop="cuser"
-        >
-          <template #default="scope">
-            <countTo
-              :startVal="0"
-              :endVal="scope.row.cuser || 0"
+              :startVal="scope.row.clickUser"
+              :endVal="scope.row.clickUser"
               :duration="100"
             ></countTo>
           </template>
@@ -297,15 +216,15 @@ import {
   getRule,
   getAppList,
   getSearchData,
-  getContentTop10,
-  getContentPage,
+  getSearchPage,
+  getSearchTop10,
 } from "@/api/index";
 
 import countTo from "@/components/counto/vue-countTo.vue";
 
 import config from "@/config/index";
 export default {
-  name: "Content",
+  name: "Search",
   data() {
     return {
       lastParams: {},
@@ -314,17 +233,15 @@ export default {
         app: "",
         version: [],
         date: [],
-        content: "",
       },
       cycle: [],
       showList: [],
       version: [],
-      content: [],
       top: [],
     };
   },
   async mounted() {
-    const { source, appV, contentV, appli, appVLi, contentli } =
+    const { source, appV,  appli, appVLi } =
       await this.getAppListFunc();
     const keys = {
       value: "mname",
@@ -332,12 +249,10 @@ export default {
     };
     this.cycle = this.verifyList(appli, source, keys, false);
     this.version = this.verifyList(appVLi, appV, keys, true);
-    this.content = this.verifyList(contentli, contentV, keys, true);
     this.form = {
       //   app: (this.cycle[0] || { value: "" }).value,
       app: "起点新闻",
       version: [(this.version[0] || { value: "" }).value],
-      content: -1,
       date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
       page: 1,
       size: 20,
@@ -347,13 +262,6 @@ export default {
   },
   computed: {},
   methods: {
-    tableChange(e) {
-      this.form.page = 1;
-      this.form.sortBy = e.column ? e.column.property : "";
-      this.lastParams.sortBy = e.column ? e.column.property : "";
-      this.lastParams.page = 1;
-      getContentPage(this.lastParams).then(r => (this.table = r || {}));
-    },
     verifyList(list, verify, obj, more) {
       if (!obj) return;
       let li = list || [];
@@ -379,31 +287,26 @@ export default {
         start: this.FormData(this.form.date[0]),
         end: this.FormData(this.form.date[1]),
         version: this.form.version == -1 ? undefined : this.form.version,
-        contentType: this.form.content == -1 ? undefined : this.form.content,
         page: this.form.page,
         pageSize: this.form.size,
         sortBy: this.form.sortBy,
       };
-      getContentPage(this.lastParams).then(r => (this.table = r || {}));
-      getContentTop10({
+      getSearchPage(this.lastParams).then(r => (this.table = r || {}));
+      getSearchTop10({
         app: this.form.app,
         start: this.FormData(this.form.date[0]),
         end: this.FormData(this.form.date[1]),
         version: this.form.version == -1 ? undefined : this.form.version,
-        contentType: this.form.content == -1 ? undefined : this.form.content,
-      })
-        .then(r => {
-          this.top = r || [];
-        });
+      }).then(r => {
+        this.top = r || [];
+      });
     },
     async getAppListFunc() {
-      const { r, li, appVersion, contentList } = await this.getAppListOri();
+      const { r, li, appVersion } = await this.getAppListOri();
       let source = { length: 0 },
         appli = [];
       let appV = { length: 0 },
         appVLi = [];
-      let contentV = { length: 0 },
-        contentli = [];
       let prvList = r.output.data.prvRolectrl || [];
       for (let i = 0; i < prvList.length; i++) {
         const v = prvList[i];
@@ -411,19 +314,14 @@ export default {
           (source[v.detid] = true), (source.length = source.length + 1);
         if (v.controlid == "APP_VERSION")
           (appV[v.detid] = true), (appV.length = appV.length + 1);
-        if (v.controlid == "content_TYPE")
-          (contentV[v.detid] = true), (contentV.length = contentV.length + 1);
       }
       if (li.status === "0") appli = li.output.data || [];
       if (appVersion.length) appVLi = appVersion || [];
-      if (contentList.length) contentli = contentList || [];
       return {
         source,
         appV,
         appli,
-        contentV,
         appVLi,
-        contentli,
       };
     },
     async getAppListOri() {
@@ -450,16 +348,7 @@ export default {
         gcode: "APP_VERSION",
         source: defaultAppName,
       });
-      // 端列表
-      let contentList = await getAppList({
-        exportMark: "0",
-        gcode: "CONTENT_TYPE",
-        pageid: 1,
-        pagesize: 1000,
-      });
-      contentList =
-        contentList.status == "0" ? contentList.output.data || [] : [];
-      return { r, li, appVersion, contentList };
+      return { r, li, appVersion };
     },
     disabledDate(time) {
       const first = new Date("2021-06-21 00:00:00");
@@ -556,11 +445,15 @@ export default {
       const app = this.lastParams.app || this.form.app;
       const version =
         this.form.version == -1 ? undefined : this.form.version.join(",");
-      const contentType = this.lastParams.contentType || this.form.contentType;
       let url =
-        config.base.leverAudience + "/cxzx-program/new-media/content/export?start=" + S + "&end=" + E +"&app=" + app;
+        config.base.leverAudience +
+        "/cxzx-program/new-media/search/export?start=" +
+        S +
+        "&end=" +
+        E +
+        "&app=" +
+        app;
       version && (url += "&version=" + version);
-      contentType && (url += "&contentType=" + contentType);
       window.open(url);
     },
   },
@@ -571,7 +464,7 @@ export default {
 </script>
 
 <style>
-.Content {
+.Search {
   margin: 10px 15px;
 }
 .libTitle {