tweak style
This commit is contained in:
		
							parent
							
								
									b635b064ee
								
							
						
					
					
						commit
						1cae39e281
					
				
					 3 changed files with 36 additions and 25 deletions
				
			
		|  | @ -53,6 +53,7 @@ export default defineComponent({ | ||||||
| 		> .title { | 		> .title { | ||||||
| 			opacity: 0.7; | 			opacity: 0.7; | ||||||
| 			margin: 0 0 8px 0; | 			margin: 0 0 8px 0; | ||||||
|  | 			font-size: 0.9em; | ||||||
| 		} | 		} | ||||||
| 	 | 	 | ||||||
| 		> .items { | 		> .items { | ||||||
|  | @ -63,6 +64,7 @@ export default defineComponent({ | ||||||
| 				box-sizing: border-box; | 				box-sizing: border-box; | ||||||
| 				padding: 10px 16px 10px 8px; | 				padding: 10px 16px 10px 8px; | ||||||
| 				border-radius: 9px; | 				border-radius: 9px; | ||||||
|  | 				font-size: 0.95em; | ||||||
| 
 | 
 | ||||||
| 				&:hover { | 				&:hover { | ||||||
| 					text-decoration: none; | 					text-decoration: none; | ||||||
|  |  | ||||||
|  | @ -1,19 +1,20 @@ | ||||||
| <template> | <template> | ||||||
| <div class="uqshojas"> | <MkSpacer :content-max="900"> | ||||||
| 	<section v-for="ad in ads" class="_card _gap ads"> | 	<div class="uqshojas"> | ||||||
| 		<div class="_content ad"> | 		<div v-for="ad in ads" class="_panel _formRoot ad"> | ||||||
| 			<MkAd v-if="ad.url" :specify="ad"/> | 			<MkAd v-if="ad.url" :specify="ad"/> | ||||||
| 			<MkInput v-model="ad.url" type="url"> | 			<MkInput v-model="ad.url" type="url" class="_formBlock"> | ||||||
| 				<template #label>URL</template> | 				<template #label>URL</template> | ||||||
| 			</MkInput> | 			</MkInput> | ||||||
| 			<MkInput v-model="ad.imageUrl"> | 			<MkInput v-model="ad.imageUrl" class="_formBlock"> | ||||||
| 				<template #label>{{ $ts.imageUrl }}</template> | 				<template #label>{{ $ts.imageUrl }}</template> | ||||||
| 			</MkInput> | 			</MkInput> | ||||||
| 			<div style="margin: 32px 0;"> | 			<FormRadios v-model="ad.place" class="_formBlock"> | ||||||
| 				<MkRadio v-model="ad.place" value="square">square</MkRadio> | 				<template #label>Form</template> | ||||||
| 				<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio> | 				<option value="square">square</option> | ||||||
| 				<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio> | 				<option value="horizontal">horizontal</option> | ||||||
| 			</div> | 				<option value="horizontal-big">horizontal-big</option> | ||||||
|  | 			</FormRadios> | ||||||
| 			<!-- | 			<!-- | ||||||
| 			<div style="margin: 32px 0;"> | 			<div style="margin: 32px 0;"> | ||||||
| 				{{ $ts.priority }} | 				{{ $ts.priority }} | ||||||
|  | @ -22,22 +23,24 @@ | ||||||
| 				<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio> | 				<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio> | ||||||
| 			</div> | 			</div> | ||||||
| 			--> | 			--> | ||||||
| 			<MkInput v-model="ad.ratio" type="number"> | 			<div class="_inputSplit"> | ||||||
| 				<template #label>{{ $ts.ratio }}</template> | 				<MkInput v-model="ad.ratio" type="number"> | ||||||
| 			</MkInput> | 					<template #label>{{ $ts.ratio }}</template> | ||||||
| 			<MkInput v-model="ad.expiresAt" type="date"> | 				</MkInput> | ||||||
| 				<template #label>{{ $ts.expiration }}</template> | 				<MkInput v-model="ad.expiresAt" type="date"> | ||||||
| 			</MkInput> | 					<template #label>{{ $ts.expiration }}</template> | ||||||
| 			<MkTextarea v-model="ad.memo"> | 				</MkInput> | ||||||
|  | 			</div> | ||||||
|  | 			<MkTextarea v-model="ad.memo" class="_formBlock"> | ||||||
| 				<template #label>{{ $ts.memo }}</template> | 				<template #label>{{ $ts.memo }}</template> | ||||||
| 			</MkTextarea> | 			</MkTextarea> | ||||||
| 			<div class="buttons"> | 			<div class="buttons _formBlock"> | ||||||
| 				<MkButton class="button" inline primary @click="save(ad)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> | 				<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> | ||||||
| 				<MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> | 				<MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 	</section> | 	</div> | ||||||
| </div> | </MkSpacer> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts"> | <script lang="ts"> | ||||||
|  | @ -45,7 +48,7 @@ import { defineComponent } from 'vue'; | ||||||
| import MkButton from '@/components/ui/button.vue'; | import MkButton from '@/components/ui/button.vue'; | ||||||
| import MkInput from '@/components/form/input.vue'; | import MkInput from '@/components/form/input.vue'; | ||||||
| import MkTextarea from '@/components/form/textarea.vue'; | import MkTextarea from '@/components/form/textarea.vue'; | ||||||
| import MkRadio from '@/components/form/radio.vue'; | import FormRadios from '@/components/form/radios.vue'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
| import * as symbols from '@/symbols'; | import * as symbols from '@/symbols'; | ||||||
| 
 | 
 | ||||||
|  | @ -54,7 +57,7 @@ export default defineComponent({ | ||||||
| 		MkButton, | 		MkButton, | ||||||
| 		MkInput, | 		MkInput, | ||||||
| 		MkTextarea, | 		MkTextarea, | ||||||
| 		MkRadio, | 		FormRadios, | ||||||
| 	}, | 	}, | ||||||
| 
 | 
 | ||||||
| 	emits: ['info'], | 	emits: ['info'], | ||||||
|  | @ -132,6 +135,12 @@ export default defineComponent({ | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| .uqshojas { | .uqshojas { | ||||||
| 	margin: var(--margin); | 	> .ad { | ||||||
|  | 		padding: 32px; | ||||||
|  | 
 | ||||||
|  | 		&:not(:last-child) { | ||||||
|  | 			margin-bottom: var(--margin); | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | @ -297,7 +297,7 @@ export default defineComponent({ | ||||||
| 	> .header { | 	> .header { | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 		margin-bottom: 24px; | 		margin-bottom: 24px; | ||||||
| 		font-size: 1.5em; | 		font-size: 1.3em; | ||||||
| 		font-weight: bold; | 		font-weight: bold; | ||||||
| 
 | 
 | ||||||
| 		> .title { | 		> .title { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue