Commit dcf4883a authored by liujiangnan's avatar liujiangnan

feat: 调整样式

parent 26753b31
<div class="question-container">
<div class="img-bar" nz-row nzType="flex" nzJustify="space-around">
<div
class="img-wrap tip-border"
*ngFor="let item of _data"
nz-col
nzSpan="6"
[@tip-border]="item.state || 'none'"
(click)="handleTap($event, item);$event.preventDefault()"
>
<img *ngIf="item.pic_id" [src]="item.pic_id" alt="" (dragstart)="false;$event.preventDefault();" />
</div>
</div>
<div class="p-tool d-flex"> <div class="player-border">
<div class="p-tool-left d-flex"> <div class="question-container">
<div class="p-tool-btn" (click)="playAudio()"> <div class="img-bar" nz-row nzType="flex" nzJustify="space-around">
<i class="anticon anticon-sound"></i> <div
</div> class="img-wrap tip-border"
<div class="p-tool-btn" (click)="lcDisplayText()"> *ngFor="let item of _data"
<i class="anticon anticon-edit"></i> nz-col
nzSpan="6"
[@tip-border]="item.state || 'none'"
(click)="handleTap($event, item);$event.preventDefault()"
>
<img *ngIf="item.pic_id" [src]="item.pic_id" alt="" (dragstart)="false;$event.preventDefault();" />
</div> </div>
</div> </div>
<div class="p-tool-right flex-fill">
<div class="i-text"> <div class="p-tool d-flex">
{{_lc_text}} <div class="p-tool-left d-flex">
<div class="p-tool-btn" (click)="playAudio()">
<i class="anticon anticon-sound"></i>
</div>
<div class="p-tool-btn" (click)="lcDisplayText()">
<i class="anticon anticon-edit"></i>
</div>
</div>
<div class="p-tool-right flex-fill">
<div class="i-text">
{{_lc_text}}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
$my_width: percentage(4/12); $my_width: percentage(4/12);
.player-border{
position: absolute;
left: calc((100% - 100vh * 1.36)/ 2);
top: 5vh;
right: calc((100% - 100vh * 1.36)/ 2);
bottom: 5vh;
text-align: center;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.question-container { .question-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -8,7 +25,7 @@ $my_width: percentage(4/12); ...@@ -8,7 +25,7 @@ $my_width: percentage(4/12);
padding-top: 1rem; padding-top: 1rem;
background: url("./assets/listen_choose_bg.jpg"); background: url("./assets/listen_choose_bg.jpg");
background-position: center; background-position: center;
background-size: cover; background-size: 105% 114%;
background-repeat: no-repeat; background-repeat: no-repeat;
.img-bar { .img-bar {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment