lixin-web/webapp/css/game.css

vue and bootstrap

body {
	background-color: #fff;
	background-image: url("../img/common/bg_s1.jpg");
	background-repeat: no-repeat;
	background-position: center 100px;
}

/* BANNER样式 */
.page-banner {
	position: relative;
	height: 295px;
}

.page-banner .bg {
	position: absolute;
	height: 72px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	
	background-image: url("../img/game/banner/banner_bg.png");
	background-repeat: no-repeat;
	background-position: center bottom;
}

.page-banner .list {
	height: 295px;
	overflow: hidden;
	background-color: #4c7ec6;
}

.page-banner .list > .item {
	text-align: center;
	font-size: 0;
	width: 100%;
	overflow: hidden;
}

.page-banner .list > .item > img {
	margin: 0 auto;
}

/* 中间部分样式 */
.page-content {
	padding: 0;
}

.page-content .wrapper {
	padding: 40px;
	background-color: #fff;
}

.page-content .navbar {
	height: 54px;
	margin: 0 -4px;
}

/* 导航样式 */
.page-content .navbar > a {
	height: 54px;
	width: 204px;
	line-height: 52px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
	display: block;
	float: left;
	background-image: url("../img/game/game_icon.png");
	background-repeat: no-repeat;
	background-position: 0 -54px;
	margin: 0 5px;
}

.page-content .navbar > a:hover,
.page-content .navbar > a.active {
	background-position: 0 0;
}

.page-content .navbar > a > i {
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: -18px;
	background-image: url("../img/game/game_icon.png");
	background-repeat: no-repeat;
}

.page-content .navbar > a > i.lottery {
	background-position: 0 -108px;
}

.page-content .navbar > a > i.live-entertainment {
	background-position: -50px -108px;
}

.page-content .navbar > a > i.athletic {
	background-position: -100px -108px;
}

.page-content .navbar > a > i.recreation {
	background-position: -150px -108px;
}

/* 彩票类别样式 */
.page-content .lottery {
	width: 968px;
	margin: 0 auto;
}

.page-content .lottery > .list {
	padding: 0;
}

.page-content .lottery > .list > .item {
	position: relative;
	height: 196px;
	margin-top: 20px;
	border-radius: 6px;
	background-image: url("../img/game/list_bg_s1.jpg");
}

.page-content .lottery > .list > .item.blue {
	background-color: #4a89bf;
	background-position: 0 0;
}

.page-content .lottery > .list > .item.light-green {
	background-color: #86cc3b;
	background-position: 0 -196px;
}

.page-content .lottery > .list > .item.dark-green {
	background-color: #43b480;
	background-position: 0 -392px;
}

.page-content .lottery > .list > .item.orange {
	background-color: #ff7600;
	background-position: 0 -588px;
}

.page-content .lottery > .list > .item > .logo {
	width: 250px;
	height: 196px;
	float: left;
	background-image: url("../img/game/lottery_list_logo.png");
	background-repeat: no-repeat;
}

.page-content .lottery > .list > .item > .logo.ssc {
	background-position: 0 0;
}

.page-content .lottery > .list > .item > .logo.kl10f {
	background-position: 0 -196px;
}

.page-content .lottery > .list > .item > .logo.fc3d {
	background-position: 0 -392px;
}

.page-content .lottery > .list > .item > .logo.pl3 {
	background-position: 0 -588px;
}

.page-content .lottery > .list > .item > .logo.x511 {
	background-position: 0 -784px;
}

.page-content .lottery > .list > .item > .logo.kl8 {
	background-position: 0 -980px;
}

.page-content .lottery > .list > .item > .logo.pk10 {
	background-position: 0 -1176px;
}

.page-content .lottery > .list > .item > .logo.k3 {
	background-position: 0 -1372px;
}

.page-content .lottery > .list > .item > .name {
	position: absolute;
	height: 39px;
	width: 133px;
	top: 26px;
	left: 260px;
	line-height: 37px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	background-image: url("../img/game/game_icon.png");
	background-repeat: no-repeat;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	border-radius: 3px;
}

.page-content .lottery > .list > .item.blue > .name {
	background-position: -204px 0;
}

.page-content .lottery > .list > .item.light-green > .name {
	background-position: -204px -39px;
}

.page-content .lottery > .list > .item.dark-green > .name {
	background-position: -204px -78px;
}

.page-content .lottery > .list > .item.orange > .name {
	background-position: -204px -117px;
}

.page-content .lottery > .list > .item > .text {
	position: absolute;
	width: 686px;
	top: 88px;
	left: 260px;
	line-height: 24px;
	font-size: 14px;
	color: rgba(255,255,255,0.9);
}

/* 真人娱乐类别样式 */
.page-content .live-entertainment {
	width: 968px;
	margin: 0 auto;
}

.page-content .live-entertainment > .list {
	padding: 0;
}

.page-content .live-entertainment > .list > .item {
	position: relative;
	height: 130px;
	margin-top: 20px;
	background-image: url("../img/game/list_bg_s1.jpg");
}

.page-content .live-entertainment > .list > .item.blue {
	background-color: #4a89bf;
	background-position: 0 0;
}

.page-content .live-entertainment > .list > .item.light-green {
	background-color: #86cc3b;
	background-position: 0 -196px;
}

.page-content .live-entertainment > .list > .item.dark-green {
	background-color: #43b480;
	background-position: 0 -392px;
}

.page-content .live-entertainment > .list > .item.orange {
	background-color: #ff7600;
	background-position: 0 -588px;
}

.page-content .live-entertainment > .list > .item > .logo {
	width: 380px;
	height: 130px;
	float: left;
	background-image: url("../img/game/live_list_logo.png");
	background-repeat: no-repeat;
}

.page-content .live-entertainment > .list > .item > .logo.ag {
	background-position: 0 0;
}

.page-content .live-entertainment > .list > .item > .logo.bbin {
	background-position: 0 -130px;
}

.page-content .live-entertainment > .list > .item > .logo.ea {
	background-position: 0 -260px;
}

.page-content .live-entertainment > .list > .item > .logo.hg {
	background-position: 0 -390px;
}

.page-content .live-entertainment > .list > .item > .logo.rienta {
	background-position: 0 -520px;
}

.page-content .live-entertainment > .list > .item > .logo.mg {
	background-position: 0 -650px;
}

.page-content .live-entertainment > .list > .item > .logo.pt {
	background-position: 0 -780px;
}

.page-content .live-entertainment > .list > .item > .text {
	width: 560px;
	float: left;
	padding: 20px 0 0 0;
	line-height: 24px;
	font-size: 14px;
	color: rgba(255,255,255,0.9);
}

.page-content .live-entertainment > .list > .live-img {
	font-size: 0;
	padding: 20px 9px;
}

.page-content .live-entertainment > .list > .live-img.blue {
	border: 1px solid #4a89bf;
}

.page-content .live-entertainment > .list > .live-img.light-green {
	border: 1px solid #86cc3b;
}

.page-content .live-entertainment > .list > .live-img.dark-green {
	border: 1px solid #43b480;
}

.page-content .live-entertainment > .list > .live-img.orange {
	border: 1px solid #ff7600;
}

.page-content .live-entertainment > .list > .live-img > a.img {
	width: 454px;
	height: 250px;
	font-size: 0;
	margin: 0 10px;
	display: inline-block;
	overflow: hidden;
}

/* 体育投注类别样式 */
.page-content .athletic {
	width: 968px;
	margin: 0 auto;
}

.page-content .athletic > .list {
	padding: 0;
}

.page-content .athletic > .list > .item {
	position: relative;
	height: 130px;
	margin-top: 20px;
	background-image: url("../img/game/list_bg_s1.jpg");
}

.page-content .athletic > .list > .item.blue {
	background-color: #4a89bf;
	background-position: 0 0;
}

.page-content .athletic > .list > .item.light-green {
	background-color: #86cc3b;
	background-position: 0 -196px;
}

.page-content .athletic > .list > .item.dark-green {
	background-color: #43b480;
	background-position: 0 -392px;
}

.page-content .athletic > .list > .item.orange {
	background-color: #ff7600;
	background-position: 0 -588px;
}

.page-content .athletic > .list > .item > .logo {
	width: 300px;
	height: 130px;
	float: left;
	background-image: url("../img/game/athletic_list_logo.png");
	background-repeat: no-repeat;
}

.page-content .athletic > .list > .item > .logo.bet188 {
	background-position: 0 0;
}

.page-content .athletic > .list > .item > .text {
	width: 644px;
	float: left;
	padding: 20px 0 0 0;
	line-height: 24px;
	font-size: 14px;
	color: rgba(255,255,255,0.9);
}

.page-content .athletic > .list > .live-img {
	font-size: 0;
	padding: 20px 9px;
}

.page-content .athletic > .list > .live-img.blue {
	border: 1px solid #4a89bf;
}

.page-content .athletic > .list > .live-img.light-green {
	border: 1px solid #86cc3b;
}

.page-content .athletic > .list > .live-img.dark-green {
	border: 1px solid #43b480;
}

.page-content .athletic > .list > .live-img.orange {
	border: 1px solid #ff7600;
}

.page-content .athletic > .list > .live-img > a.img {
	width: 454px;
	height: 250px;
	font-size: 0;
	margin: 0 10px;
	display: inline-block;
	overflow: hidden;
}

/* 老虎机类别样式 */
.page-content .recreation {
	width: 968px;
	margin: 0 auto;
}

.page-content .recreation > .list {
	padding: 0;
}

.page-content .recreation > .list > .item {
	position: relative;
	height: 130px;
	margin-top: 20px;
	background-image: url("../img/game/list_bg_s1.jpg");
}

.page-content .recreation > .list > .item.blue {
	background-color: #4a89bf;
	background-position: 0 0;
}

.page-content .recreation > .list > .item.light-green {
	background-color: #86cc3b;
	background-position: 0 -196px;
}

.page-content .recreation > .list > .item.dark-green {
	background-color: #43b480;
	background-position: 0 -392px;
}

.page-content .recreation > .list > .item.orange {
	background-color: #ff7600;
	background-position: 0 -588px;
}

.page-content .recreation > .list > .item > .logo {
	width: 380px;
	height: 130px;
	float: left;
	background-image: url("../img/game/live_list_logo.png");
	background-repeat: no-repeat;
}

.page-content .recreation > .list > .item > .logo.mg {
	background-position: 0 -650px;
}

.page-content .recreation > .list > .item > .logo.pt {
	background-position: 0 -780px;
}

.page-content .recreation > .list > .item > .text {
	width: 560px;
	float: left;
	padding: 20px 0 0 0;
	line-height: 24px;
	font-size: 14px;
	color: rgba(255,255,255,0.9);
}

.page-content .recreation > .list > .live-img {
	font-size: 0;
	padding: 20px 9px;
}

.page-content .recreation > .list > .live-img.blue {
	border: 1px solid #4a89bf;
}

.page-content .recreation > .list > .live-img.light-green {
	border: 1px solid #86cc3b;
}

.page-content .recreation > .list > .live-img.dark-green {
	border: 1px solid #43b480;
}

.page-content .recreation > .list > .live-img.orange {
	border: 1px solid #ff7600;
}

.page-content .recreation > .list > .live-img > a.img {
	width: 454px;
	height: 250px;
	font-size: 0;
	margin: 0 10px;
	display: inline-block;
	overflow: hidden;
}