| | |
|---|
| | | list-style:none; |
|---|
| | | float: left; |
|---|
| | | display: block; |
|---|
| | | border: #0e9aef 1px solid; |
|---|
| | | cursor: pointer; |
|---|
| | | position: relative; |
|---|
| | | border: white 1px solid; |
|---|
| | | } |
|---|
| | | .paymethod ul li:hover { |
|---|
| | | border: #409EFF 1px solid; |
|---|
| | | } |
|---|
| | | .paymethod .active { |
|---|
| | | border: #409EFF 1px solid; |
|---|
| | | } |
|---|
| | | .paymethod .active::after { |
|---|
| | | content: ''; |
|---|
| | | display: block; |
|---|
| | | height: 0px; |
|---|
| | | width: 0px; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | right: 0; |
|---|
| | | color:#fff; |
|---|
| | | /**对号大小*/ |
|---|
| | | font-size: 10px; |
|---|
| | | line-height: 8px; |
|---|
| | | border: 3px solid; |
|---|
| | | border-color: transparent #4884ff #4884ff transparent; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | |
|---|
| | | <el-row type="flex" align="middle" style="padding: 10px 0;"> |
|---|
| | | <el-col :span="5" style="text-align: center;">收款方式</el-col> |
|---|
| | | <el-col class="paymethod" :span="15"> |
|---|
| | | <ul style="border: #0c7cb5 1px dashed;"> |
|---|
| | | <li>现金支付</li> |
|---|
| | | <li>微信</li> |
|---|
| | | <li>支付宝</li> |
|---|
| | | <li>银行卡支付</li> |
|---|
| | | <li>团购</li> |
|---|
| | | </ul> |
|---|
| | | |
|---|
| | | <ul> |
|---|
| | | <li>会员储值卡</li> |
|---|
| | | <li>欠款</li> |
|---|
| | | </ul> |
|---|
| | | <el-row> |
|---|
| | | <ul style="border: #0c7cb5 1px dashed;"> |
|---|
| | | <li class="active">现金支付</li> |
|---|
| | | <li>微信</li> |
|---|
| | | <li>支付宝</li> |
|---|
| | | <li>银行卡支付</li> |
|---|
| | | <li>团购</li> |
|---|
| | | </ul> |
|---|
| | | </el-row> |
|---|
| | | <el-row> |
|---|
| | | <ul> |
|---|
| | | <li>会员储值卡</li> |
|---|
| | | <li>欠款</li> |
|---|
| | | </ul> |
|---|
| | | </el-row> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
