app-station-control-frontend_v1/components/SubTitle/SubTitle.vue

<template>
	<view class="subtilte">
		<view class="title">
			<view class="icon"></view>
			<view class="name">{{ title }}</view>
			<view class="letter">{{ titleEng }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['title','titleEng'],
		name: "SubTitle",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	$lineColor:#191F33;
	$titColor:#192233;
	// SubTile公共样式
	.subtilte{
	    display: flex;
	    flex-direction: column;
	    border-top:$lineColor solid 1px;
	    border-bottom:$lineColor solid 1px;
	    width: 100%;
	    .title{
	        width: 100%;
	        background-color: $titColor;
	        margin: 1px 0px;
	        height: 24px;
	        display: flex;
	        .icon{
	            width: 17px;
	            height: 10px;
	            background-image: url('/static/public/ico2.png');
	            background-size: 100% 100%;
	            margin-left: 2px;
	        }
	        .name{
	            font-size: 16px;
	            margin-left: -5px;
	            height: 24px;
	            line-height: 22px;
	            font-weight: 600;
	            letter-spacing: 1px;
	            text-shadow: 0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce;
	            color: white;
	        }
			.letter{
				color: #2A3855;
				font-size: 10px;
				margin-left: 5px;
				padding-top: 5px;
				font-weight: 600;
			}
	        .carOnline{
	            margin-left: auto;
	            font-size: 15px;
	            font-weight: 600;
	            color: rgba(255,255,255,0.85);
	            line-height: 34px;
	            text-shadow: 0px 0px 4px #0027D8;
	            cursor: pointer;
	            font{
	                text-decoration: underline;
	                color: #91FDB9;
	                text-shadow: 0px 0px 4px #0027D8;
	                margin-right: 16px;
	            }
	        }
	    }
	}
</style>