CommonSystem.vue

<template>
	<CardWrapper title="常用系统" v-on="$listeners" v-bind="$attrs">
		<div class="content">
			<div class="notice-item" v-for="(item, index) in testData" :key="index">
					<i class="el-icon-arrow-right"></i>
					<a :href="item.url" target="_blank" class="notice-title">
						{{ item.title }}
					</a>
				</div>
		</div>
	</CardWrapper>
</template>

<script>
import CardWrapper from "./CardWrapper.vue";

export default {
  name: "CommonSystem",
  components: { CardWrapper },
  data() {
    return {
      testData: [
				{
					title: '人民币跨境收付信息管理系统',
					url: "https://9.0.47.118/rcpmisbank/index"
				},
				{
					title: '国家外汇管理局银行信息门户网站',
					url: "http://banksvc.safe/safe/"
				},
				{
					title: '中国国际贸易单一窗口',
					url: "https://www.singlewindow.cn/"
				},
				{
					title: '人民币跨境收付信息管理前置系统',
					url: "http://urrp-rcp.eca.prod.cebbank:17701/#/user/login?redirect=%2F "
				},
				{
					title: '中志公司官网',
					url: "https://www.zhongzhico.cn/ "
				}
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="less">
.content {
  padding: 20px 0px 30px;
}

.notice-item {
	height: 44px;
  width: 100%;
  justify-content: space-between;
	margin-bottom: 8px;
	padding:12px 0 12px 8px;
	
}

.notice-item:nth-child(odd) {
  background-color:#F8F8F8;
}

.notice-title {
	display: inline-block;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
	flex: 1;
	font-size: 14px;
	text-decoration: none;
	vertical-align: baseline;
}

.el-icon-arrow-right{
	vertical-align: middle;
	margin-right: 4px
}

.el-icon-arrow-right:after {
		content: "\e6e0";
}
</style>