| | |
| | | </div>
|
| | | <div class="bar-group">
|
| | | <div
|
| | | class="bar"
|
| | | class="general-bar"
|
| | | v-for="(item, i) in soundList"
|
| | | :key="i"
|
| | | @click="clickSound(item, i)"
|
| | |
| | | <div class="left-part">
|
| | | <span class="name">{{ item.name }}</span>
|
| | | </div>
|
| | | <div class="btns">
|
| | | <div class="sound-btns">
|
| | | <span @click="togglePlay(item, i)">
|
| | | <span
|
| | | class="iconfont"
|
| | |
| | | .bar-group {
|
| | | overflow: auto;
|
| | | height: 520px;
|
| | | }
|
| | | .bar {
|
| | | height: 48px;
|
| | | background-color: #f8f8f8;
|
| | | border-radius: 10px;
|
| | | line-height: 48px;
|
| | | box-sizing: border-box;
|
| | | padding: 0 20px 0 20px;
|
| | | font-weight: 700;
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | margin-bottom: 2px;
|
| | | border: 2px solid #fff;
|
| | | .name {
|
| | | font-size: 14px;
|
| | | }
|
| | | .btns {
|
| | | width: 52px;
|
| | | .general-bar {
|
| | | height: 48px;
|
| | | background-color: #f8f8f8;
|
| | | border-radius: 10px;
|
| | | line-height: 48px;
|
| | | box-sizing: border-box;
|
| | | padding: 0 20px 0 20px;
|
| | | font-weight: 700;
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | color: rgba(191, 191, 191, 1);
|
| | | /* .el-icon-video-pause {
|
| | | margin-bottom: 2px;
|
| | | border: 2px solid #fff;
|
| | | .name {
|
| | | font-size: 14px;
|
| | | }
|
| | | .sound-btns {
|
| | | width: 52px;
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | color: rgba(191, 191, 191, 1);
|
| | | /* .el-icon-video-pause {
|
| | | cursor: pointer;
|
| | | font-size: 23px;
|
| | | vertical-align: middle;
|
| | |
| | | vertical-align: middle;
|
| | | color: #409eff;
|
| | | } */
|
| | | span {
|
| | | color: #333;
|
| | | span {
|
| | | color: #333;
|
| | | }
|
| | | .del:hover {
|
| | | color: #fc4958;
|
| | | }
|
| | | }
|
| | | .del:hover {
|
| | | color: #fc4958;
|
| | | .desc {
|
| | | font-size: 14px;
|
| | | color: rgba(134, 134, 134, 1);
|
| | | }
|
| | | }
|
| | | .desc {
|
| | | font-size: 14px;
|
| | | color: rgba(134, 134, 134, 1);
|
| | | }
|
| | | }
|
| | |
|
| | | /* .bar:hover {
|
| | | border: 2px solid #4E94FF !important;
|
| | | } */
|