update

src/components/pages/appStore/dialog/addAppDialog.vue

@@ -88,6 +88,18 @@
 </template>
 
 <script>
+
+let validUrl = (rule, value, callback) => {
+	if (value) {
+		// 验证链接是否有效
+		try {
+			new URL(value);
+			callback();
+		} catch (error) {
+			return callback(new Error("请输入有效的链接"));
+		}
+	}
+}
 export default {
   props: {
     typeList: {
@@ -120,7 +132,8 @@ export default {
         ],
         ntype: [{ required: true, message: "请选择应用类型", trigger: "blur" }],
         // ndetail:[{required:true,message:"请输入应用简介",trigger:"blur"}],
-        njuri: [{ required: true, message: "请选择权限管理", trigger: "blur" }]
+        njuri: [{ required: true, message: "请选择权限管理", trigger: "blur" }],
+				nurl: [{ required: true, message: "请输入应用链接", trigger: "blur" },{ validator: validUrl, trigger: "blur" }]
       }
     };
   },

src/components/pages/appStore/index.vue

@@ -1,272 +1,350 @@
 <template>
-	<div class="appCenter">
-		<div class="ac_header">
-			<div class="ac_h_top">
-				<span>应用管理</span>
-
-				<el-button type="primary" size="small" icon="el-icon-plus" style="position: absolute;right: 15px;" @click="addApp">添加应用</el-button>
-			</div>
-			<div class="ac_h_bottom">
-
-				<div class="ac_h_b_selectList">
-					<el-input v-model="searchText" style="width: 200px;" placeholder="请输入应用名称" @keyup.enter.native="getData"/>
-					<el-select v-model="selectJuri" placeholder="请选择" @change="changeSelectType">
-						<el-option v-for="item in selectList" :key="item.index" :label="item.label" :value="item.index"></el-option>
-					</el-select>
-					<el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="getData"></el-button>
-					<el-button type="primary" @click="resetData">重置</el-button>
-				</div>
-
-				<div class="ac_h_b_typeList">
-					<span :class="{'ac_h_b_typeList_active':showType===''}" @click="changeType('')">全部</span>
-					<span v-for="item in typeList" :key="item.id" :class="{'ac_h_b_typeList_active':showType===item.id}" @click="changeType(item.id)">{{item.name}}</span>
-				</div>
-	
+  <div class="appCenter">
+    <div class="ac_header">
+      <div class="ac_h_top">
+        <span>应用管理</span>
+
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-plus"
+          style="position: absolute;right: 15px;"
+          @click="addApp"
+          >添加应用</el-button
+        >
+      </div>
+      <div class="ac_h_bottom">
+        <div class="ac_h_b_selectList">
+          <el-input
+            v-model="searchText"
+            style="width: 200px;"
+            placeholder="请输入应用名称"
+            @keyup.enter.native="getData"
+          />
+          <el-select
+            v-model="selectJuri"
+            placeholder="请选择"
+            @change="changeSelectType"
+          >
+            <el-option
+              v-for="item in selectList"
+              :key="item.index"
+              :label="item.label"
+              :value="item.index"
+            ></el-option>
+          </el-select>
+          <el-button
+            type="primary"
+            style="margin-left: 10px;"
+            icon="el-icon-search"
+            @click="getData"
+          ></el-button>
+          <el-button type="primary" @click="resetData">重置</el-button>
+        </div>
+
+        <div class="ac_h_b_typeList">
+          <span
+            :class="{ ac_h_b_typeList_active: showType === '' }"
+            @click="changeType('')"
+            >全部</span
+          >
+          <span
+            v-for="item in typeList"
+            :key="item.id"
+            :class="{ ac_h_b_typeList_active: showType === item.id }"
+            @click="changeType(item.id)"
+            >{{ item.name }}</span
+          >
+        </div>
+      </div>
+    </div>
+
+    <div class="ac_content">
+      <div class="ac_c_item" v-for="(item, index) in dataList" :key="item.id">
+        <div class="ac_c_i_top">
+          <div class="ac_c_i_t_left">
+            <svg
+              t="1732605901531"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="4275"
+              width="200"
+              height="200"
+            >
+              <path
+                d="M179.2 153.6a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V204.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V204.8a153.6 153.6 0 0 1 153.6-153.6z m0 614.4a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V716.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V716.8a153.6 153.6 0 0 1 153.6-153.6z m611.84-403.4048a51.2 51.2 0 0 0-72.3968 0L646.144 232.2432a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968L791.04 159.744z m72.3968-72.3968l72.3968 72.3968a153.6 153.6 0 0 1 0 217.2416l-72.3968 72.3968a153.6 153.6 0 0 1-217.2416 0l-72.3968-72.3968a153.6 153.6 0 0 1 0-217.2416l72.3968-72.3968a153.6 153.6 0 0 1 217.2416 0zM699.7504 896a51.2 51.2 0 0 1 0 102.4A162.1504 162.1504 0 0 1 537.6 836.2496v-110.8992A162.1504 162.1504 0 0 1 699.7504 563.2h110.8992a162.1504 162.1504 0 0 1 162.1504 162.1504v8.448a51.2 51.2 0 0 1-102.4 0v-8.448c0-33.024-26.7264-59.7504-59.7504-59.7504h-110.8992c-33.024 0-59.7504 26.7264-59.7504 59.7504v110.8992c0 33.024 26.7264 59.7504 59.7504 59.7504z"
+                fill="#2C6DD2"
+                p-id="4276"
+              ></path>
+              <path
+                d="M791.4496 160a51.2 51.2 0 0 0-72.3968 0l-72.448 72.3968a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968l-72.3968-72.3968z"
+                fill="#20C997"
+                p-id="4277"
+              ></path>
+            </svg>
+          </div>
+          <div class="ac_c_i_t_right">
+            <div>{{ item.name }}</div>
+            <span>{{ item.label }}</span>
+          </div>
+        </div>
+        <div class="ac_c_i_bottom">
+          <div>{{ item.detail }}</div>
+          <span @click="openApp(item.url)">{{ item.url }}</span>
+        </div>
+      </div>
+			<div class="ac_c_empty" v-if="dataList.length === 0">
+				<span>暂无数据...</span>
 			</div>
-		</div>
-
-		<div class="ac_content" v-loading="getDataLoading">
-			<div class="ac_c_item" v-for="(item,index) in dataList" :key="item.id">
-				<div class="ac_c_i_top">
-					<div class="ac_c_i_t_left">
-						<svg t="1732605901531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4275" width="200" height="200"><path d="M179.2 153.6a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V204.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V204.8a153.6 153.6 0 0 1 153.6-153.6z m0 614.4a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V716.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V716.8a153.6 153.6 0 0 1 153.6-153.6z m611.84-403.4048a51.2 51.2 0 0 0-72.3968 0L646.144 232.2432a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968L791.04 159.744z m72.3968-72.3968l72.3968 72.3968a153.6 153.6 0 0 1 0 217.2416l-72.3968 72.3968a153.6 153.6 0 0 1-217.2416 0l-72.3968-72.3968a153.6 153.6 0 0 1 0-217.2416l72.3968-72.3968a153.6 153.6 0 0 1 217.2416 0zM699.7504 896a51.2 51.2 0 0 1 0 102.4A162.1504 162.1504 0 0 1 537.6 836.2496v-110.8992A162.1504 162.1504 0 0 1 699.7504 563.2h110.8992a162.1504 162.1504 0 0 1 162.1504 162.1504v8.448a51.2 51.2 0 0 1-102.4 0v-8.448c0-33.024-26.7264-59.7504-59.7504-59.7504h-110.8992c-33.024 0-59.7504 26.7264-59.7504 59.7504v110.8992c0 33.024 26.7264 59.7504 59.7504 59.7504z" fill="#2C6DD2" p-id="4276"></path><path d="M791.4496 160a51.2 51.2 0 0 0-72.3968 0l-72.448 72.3968a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968l-72.3968-72.3968z" fill="#20C997" p-id="4277"></path></svg>
-					</div>
-					<div class="ac_c_i_t_right">
-						<div>{{ item.name }}</div>
-						<span>{{ item.label }}</span>
-					</div>
-				</div>
-				<div class="ac_c_i_bottom">
-					<div>{{ item.detail }}</div>
-					<span>{{ item.url }}</span>
-				</div>
-			</div>
-		</div>
-		<addAppDialog ref="addAppDialogRef" :typeList="typeList" @success="addAppSuccess"/>
-	</div>
+    </div>
+    <addAppDialog
+      ref="addAppDialogRef"
+      :typeList="typeList"
+      @success="addAppSuccess"
+    />
+  </div>
 </template>
 
 <script>
 import addAppDialog from "./dialog/addAppDialog.vue";
 export default {
-	components:{
-		addAppDialog
-	},
-	data(){
-			return {
-				showType:"",
-				searchText:"",
-				selectJuri:1,
-				typeList:[],
-				selectList:[
-					{index:1,label:"我的"},
-					{index:2,label:"组织"},
-					{index:3,label:"所有人"},
-				],
-				userId: this.$route.query["userid"],
-				org: this.$route.query["org"],
-				oid: this.$route.query["oid"],
-				getDataLoading:false,
-				dataList:[],
-			}
-		},
-		methods:{
-			changeType(newIndex){
-				let flag = this.showType === newIndex;
-				this.showType = newIndex;
-				if(!flag){
-					this.getData();
-				}
-			},
-			changeSelectType(){
-				this.getData();
-			},
-			getData(){
-				this.getDataLoading = true;
-				let params = {
-					uid:this.userId,
-					name:this.searchText,
-					label:"",
-					type:this.showType,
-					juri:this.selectJuri,
-					stand:"cn",
-				}
-
-				this.ajax.get(this.$store.state.api+"select_appStore",params).then(res=>{
-					this.getDataLoading = false;
-					let _data = res.data[0];
-					if(_data.length > 0){
-						this.dataList = _data;
-					}else{
-						this.dataList = [];
-					}
-				}).catch(err=>{
-					this.getDataLoading = false;
-					console.log(err)
-					this.$message.error("获取应用失败");
-				})
-
-
-			},
-			addApp(){
-				this.$refs.addAppDialogRef.open({type:1});
-			},
-			addAppSuccess(data,type){
-				if(type===1){//添加
-					let params = [{
-						nname:data.nname,
-						nuserid:this.userId,
-						nlabel:data.nlabel,
-						ndetail:data.ndetail,
-						nurl:data.nurl,
-						ntype:data.ntype,
-						njuri:data.njuri,
-						nstand:'cn',
-						njson:"",
-					}]
-					this.ajax.post(this.$store.state.api+"insert_appStore",params).then(res=>{
-						if(res.data==1){
-							this.$message.success("添加成功");
-							this.$refs.addAppDialogRef.close(true);
-							this.getData();
-						}else{
-							this.$message.error("添加失败");
-							this.$refs.addAppDialogRef.loading = false;
-						}
-					}).catch(err=>{
-						console.log(err)
-						this.$message.error("添加失败");
-					})
-
-				}else if(type===2){//编辑
-					console.log("编辑")
-					console.log(data)
-				}
-			},
-			getTypeList(){
-				let params = {
-					suserid:this.userId,
-					sorg:this.org,
-					soid:this.oid,
-					sstand:"cn",
-				}
-
-				this.ajax.get(this.$store.state.api+"select_appStoreType",params).then(res=>{
-					let data = res.data[0];
-					if(data.length > 0){
-						this.typeList = data;
-					}
-				}).catch(err=>{
-					console.log(err)
-					this.$message.error("获取应用类型失败");
-				})
-			},
-			resetData(){
-				this.searchText = "";
-				this.selectJuri = 1;
-				this.showType = "";
-				this.getData();
-			}
+  components: {
+    addAppDialog
+  },
+  data() {
+    return {
+      showType: "",
+      searchText: "",
+      selectJuri: 1,
+      typeList: [],
+      selectList: [
+        { index: 1, label: "我的" },
+        { index: 2, label: "组织" },
+        { index: 3, label: "所有人" }
+      ],
+      userId: this.$route.query["userid"],
+      org: this.$route.query["org"],
+      oid: this.$route.query["oid"],
+      getDataLoading: false,
+      dataList: []
+    };
+  },
+  methods: {
+    changeType(newIndex) {
+      let flag = this.showType === newIndex;
+      this.showType = newIndex;
+      if (!flag) {
+        this.getData();
+      }
+    },
+    changeSelectType() {
+      this.getData();
+    },
+    getData() {
+      this.getDataLoading = true;
+      let params = {
+        uid: this.userId,
+        name: this.searchText,
+        label: "",
+        type: this.showType,
+        juri: this.selectJuri,
+        stand: "cn"
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "select_appStore", params)
+        .then(res => {
+          this.getDataLoading = false;
+          let _data = res.data[0];
+          if (_data.length > 0) {
+            this.dataList = _data;
+          } else {
+            this.dataList = [];
+          }
+        })
+        .catch(err => {
+          this.getDataLoading = false;
+          console.log(err);
+          this.$message.error("获取应用失败");
+        });
+    },
+    addApp() {
+      this.$refs.addAppDialogRef.open({ type: 1 });
+    },
+    addAppSuccess(data, type) {
+      if (type === 1) {
+        //添加
+        let params = [
+          {
+            nname: data.nname, //app名称
+            nuserid: this.userId, //创建的用户ID
+            nlabel: data.nlabel, //app标签
+            ndetail: data.ndetail, //app简介
+            nurl: data.nurl, //app链接
+            ntype: data.ntype, //app类型
+            njuri: data.njuri, //app权限 1:我的 2:组织 3:所有人
+            nstand: "cn", //语言
+            njson: "" //其他信息
+          }
+        ];
+        this.ajax
+          .post(this.$store.state.api + "insert_appStore", params)
+          .then(res => {
+            if (res.data == 1) {
+              this.$message.success("添加成功");
+              this.$refs.addAppDialogRef.close(true);
+              this.getData();
+            } else {
+              this.$message.error("添加失败");
+              this.$refs.addAppDialogRef.loading = false;
+            }
+          })
+          .catch(err => {
+            console.log(err);
+            this.$message.error("添加失败");
+          });
+      } else if (type === 2) {
+        //编辑
+        console.log("编辑");
+        console.log(data);
+      }
+    },
+    getTypeList() {
+      let params = {
+        suserid: this.userId,
+        sorg: this.org,
+        soid: this.oid,
+        sstand: "cn"
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "select_appStoreType", params)
+        .then(res => {
+          let data = res.data[0];
+          if (data.length > 0) {
+            this.typeList = data;
+          }
+        })
+        .catch(err => {
+          console.log(err);
+          this.$message.error("获取应用类型失败");
+        });
+    },
+		openApp(url){
+			window.open(url, '_blank');
 		},
-		mounted(){
-			this.getTypeList();
-			this.getData();
-		}
-	}
+    resetData() {
+      this.searchText = "";
+      this.selectJuri = 1;
+      this.showType = "";
+      this.getData();
+    }
+  },
+  mounted() {
+    this.getTypeList();
+    this.getData();
+  }
+};
 </script>
 
 <style scoped>
-.appCenter{
-	width: 100vw;
-	height: 100vh;
-	background-color: #F2F4F7;
-	margin: 0;
-	overflow: auto;
-	box-sizing: border-box;
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
+.appCenter {
+  width: 100vw;
+  height: 100vh;
+  background-color: #f2f4f7;
+  margin: 0;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
 }
 
-.ac_header{
-	width: 100%;
-	height: auto;
-	border-radius: 5px;
-	background-color: #fff;
+.ac_header {
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+  background-color: #fff;
 }
 
-.ac_h_top{
-	width: 100%;
-	height: 50px;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0 15px;
-	border-bottom: 1px solid #EEEEEE;
-	position: relative;
+.ac_h_top {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 15px;
+  border-bottom: 1px solid #eeeeee;
+  position: relative;
 }
 
-.ac_h_top>span{
-	font-size: 26px;
+.ac_h_top > span {
+  font-size: 26px;
 }
 
-.ac_h_bottom{
-	width: 100%;
-	height: auto;
-	padding: 10px 0 20px 0;
-	
+.ac_h_bottom {
+  width: 100%;
+  height: auto;
+  padding: 10px 0 20px 0;
 }
 
-.ac_h_b_typeList{
-	width: 100%;
-	height: auto;
-	display: flex;
-	flex-wrap: wrap;
-	box-sizing: border-box;
-	padding: 0 15px;
+.ac_h_b_typeList {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding: 0 15px;
 }
 
-.ac_h_b_typeList>span{
-	font-size: 18px;
-	margin-right: 20px;
-	margin-top: 10px;
-	margin-bottom: 5px;
-	cursor: pointer;
+.ac_h_b_typeList > span {
+  font-size: 18px;
+  margin-right: 20px;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
 }
 
-.ac_h_b_typeList_active{
-	color: #007AFF;
+.ac_h_b_typeList_active {
+  color: #007aff;
 }
 
-.ac_h_b_selectList{
-	margin-left: 15px;
-	margin-bottom: 10px;
+.ac_h_b_selectList {
+  margin-left: 15px;
+  margin-bottom: 10px;
 }
 
-.ac_content{
-	width: 100%;
-	flex: 1;
-	height: auto;
-	margin-top: 20px;
-	overflow: auto;
-
+.ac_content {
+  width: 100%;
+  flex: 1;
+  height: auto;
+  margin-top: 20px;
+  overflow: auto;
 }
 
-.ac_c_item{
-	width: calc(100% / 5 - (15px * 4) / 5);
-	height: 250px;
-	background-color: #fff;
-	border-radius: 10px;
-	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
-	box-sizing: border-box;
-	padding: 15px;
-	margin-right: 15px;
-	margin-bottom: 15px;
-	float: left;
+.ac_c_item {
+  width: calc(100% / 5 - (15px * 4) / 5);
+  height: 250px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  padding: 15px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  float: left;
 }
 
-.ac_c_item:nth-child(5n) {
-  margin-right: 0px !important;
+@media screen and (min-width: 1400px) {
+  .ac_c_item {
+    width: calc(100% / 5 - (15px * 4) / 5) !important;
+  }
+	.ac_c_item:nth-child(5n) {
+    margin-right: 0px !important;
+		/* background-color: red; */
+  }
 }
 
 @media screen and (max-width: 1380px) {
@@ -292,7 +370,7 @@ export default {
     margin-right: 15px !important;
   }
 
-  .ac_c_item:nth-of-type(4n) {    
+  .ac_c_item:nth-of-type(4n) {
     margin-right: 15px !important;
   }
 
@@ -301,85 +379,95 @@ export default {
   }
 }
 
-.ac_c_i_top{
+.ac_c_empty{
 	width: 100%;
-	height: 50px;
+	height: 40%;
 	display: flex;
-	/* flex-direction: column; */
-	/* justify-content: space-evenly; */
-	/* background-color: red */
+	box-sizing: border-box;
+	padding-top: 2%;
+	justify-content: center;
+	/* align-items: center; */
 }
 
-.ac_c_i_t_left{
-	width: 50px;
-	height: 50px;
-	border-radius: 8px;
-	margin-right: 10px;
-	box-sizing: border-box;
-	padding: 5px;
+.ac_c_i_top {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  /* flex-direction: column; */
+  /* justify-content: space-evenly; */
+  /* background-color: red */
 }
 
-.ac_c_i_t_left>svg{
-	width: 100%;
-	height: 100%;
+.ac_c_i_t_left {
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  margin-right: 10px;
+  box-sizing: border-box;
+  padding: 5px;
 }
 
-.ac_c_i_t_right{
-	width: calc(100% - 60px);
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
+.ac_c_i_t_left > svg {
+  width: 100%;
+  height: 100%;
 }
 
-.ac_c_i_t_right>div{
-	font-size: 22px;
-	font-weight: bold;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.ac_c_i_t_right {
+  width: calc(100% - 60px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
 }
 
-.ac_c_i_t_right>span{
-	font-size: 16px;
-	font-weight: bold;
-	color: #8991A1;
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.ac_c_i_t_right > div {
+  font-size: 22px;
+  font-weight: bold;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.ac_c_i_bottom{
-	width: 100%;
-	height: calc(100% - 60px);
-	margin-top: 15px;
+.ac_c_i_t_right > span {
+  font-size: 16px;
+  font-weight: bold;
+  color: #8991a1;
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.ac_c_i_bottom>div{
-	font-size: 20px;
-	color: #8991A1;
-	width: 100%;
-	height: calc(100% - 30px);
-	/* 第四行溢出显示... */
-	display: -webkit-box;
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	-webkit-line-clamp: 4; 
-	-webkit-box-orient: vertical;
+.ac_c_i_bottom {
+  width: 100%;
+  height: calc(100% - 60px);
+  margin-top: 15px;
 }
 
-.ac_c_i_bottom>span{
+.ac_c_i_bottom > div {
+  font-size: 20px;
+  color: #8991a1;
+  width: 100%;
+  height: calc(100% - 30px);
+  /* 第四行溢出显示... */
+  display: -webkit-box;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
 
-	margin-top: 5px;
-	font-size: 16px;
-	color: #409EFF;
-	overflow: hidden;
-	display: block;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.ac_c_i_bottom > span {
+  margin-top: 5px;
+  font-size: 16px;
+  color: #409eff;
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+	cursor: pointer;
 }
-</style>
+</style>