Strona główna Odkrywaj Pomoc
Zaloguj się
yuansh
/
GEKE_PHONE
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Gałąź: master
Gałęzie Tagi
GEKE_PHONE
/
pages
/
basics
/
layout.vue

layout.vue 8.6 KB
Bezpośredni odnośnik Historia Czysty

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 
  1. <template>
    2. 

  2. 	<view>
    3. 

  3. 		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">布局</block></cu-custom>
    4. 

  4. 		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
    5. 

  5. 			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
    6. 

  6. 			 :data-id="index">
    7. 

  7. 				{{tabNav[index]}}
    8. 

  8. 			</view>
    9. 

  9. 		</scroll-view>
    10. 

  10. 		<block v-if="TabCur==0">
    11. 

  11. 			<view class="cu-bar bg-white solid-bottom margin-top">
    12. 

  12. 				<view class="action">
    13. 

  13. 					<text class="cuIcon-title text-blue"></text>固定尺寸
    14. 

  14. 				</view>
    15. 

  15. 			</view>
    16. 

  16. 			<view class="padding bg-white">
    17. 

  17. 				<view class="flex flex-wrap">
    18. 

  18. 					<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
    19. 

  19. 					<view class="basis-df"></view>
    20. 

  20. 					<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
    21. 

  21. 					<view class="basis-df"></view>
    22. 

  22. 					<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
    23. 

  23. 					<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
    24. 

  24. 					<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
    25. 

  25. 				</view>
    26. 

  26. 			</view>
    27. 

  27. 			<view class="cu-bar bg-white  margin-top solid-bottom">
    28. 

  28. 				<view class="action">
    29. 

  29. 					<text class="cuIcon-title text-blue"></text>比例布局
    30. 

  30. 				</view>
    31. 

  31. 			</view>
    32. 

  32. 			<view class="padding bg-white">
    33. 

  33. 				<view class="flex">
    34. 

  34. 					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    35. 

  35. 					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    36. 

  36. 				</view>
    37. 

  37. 				<view class="flex  p-xs margin-bottom-sm mb-sm">
    38. 

  38. 					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    39. 

  39. 					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
    40. 

  40. 				</view>
    41. 

  41. 				<view class="flex  p-xs margin-bottom-sm mb-sm">
    42. 

  42. 					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    43. 

  43. 					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
    44. 

  44. 					<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
    45. 

  45. 				</view>
    46. 

  46. 			</view>
    47. 

  47. 			<view class="cu-bar bg-white  margin-top solid-bottom">
    48. 

  48. 				<view class="action">
    49. 

  49. 					<text class="cuIcon-title text-blue"></text>水平对齐(justify)
    50. 

  50. 				</view>
    51. 

  51. 			</view>
    52. 

  52. 			<view class="bg-white">
    53. 

  53. 				<view class="flex solid-bottom padding justify-start">
    54. 

  54. 					<view class="bg-grey padding-sm margin-xs radius">start</view>
    55. 

  55. 					<view class="bg-grey padding-sm margin-xs radius">start</view>
    56. 

  56. 				</view>
    57. 

  57. 				<view class="flex solid-bottom padding justify-end">
    58. 

  58. 					<view class="bg-grey padding-sm margin-xs radius">end</view>
    59. 

  59. 					<view class="bg-grey padding-sm margin-xs radius">end</view>
    60. 

  60. 				</view>
    61. 

  61. 				<view class="flex solid-bottom padding justify-center">
    62. 

  62. 					<view class="bg-grey padding-sm margin-xs radius">center</view>
    63. 

  63. 					<view class="bg-grey padding-sm margin-xs radius">center</view>
    64. 

  64. 				</view>
    65. 

  65. 				<view class="flex solid-bottom padding justify-between">
    66. 

  66. 					<view class="bg-grey padding-sm margin-xs radius">between</view>
    67. 

  67. 					<view class="bg-grey padding-sm margin-xs radius">between</view>
    68. 

  68. 				</view>
    69. 

  69. 				<view class="flex solid-bottom padding justify-around">
    70. 

  70. 					<view class="bg-grey padding-sm margin-xs radius">around</view>
    71. 

  71. 					<view class="bg-grey padding-sm margin-xs radius">around</view>
    72. 

  72. 				</view>
    73. 

  73. 			</view>
    74. 

  74. 			<view class="cu-bar bg-white  margin-top solid-bottom">
    75. 

  75. 				<view class="action">
    76. 

  76. 					<text class="cuIcon-title text-blue"></text>垂直对齐(align)
    77. 

  77. 				</view>
    78. 

  78. 			</view>
    79. 

  79. 			<view class="bg-white">
    80. 

  80. 				<view class="flex solid-bottom padding align-start">
    81. 

  81. 					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    82. 

  82. 					<view class="bg-grey padding-sm margin-xs radius">start</view>
    83. 

  83. 				</view>
    84. 

  84. 				<view class="flex solid-bottom padding align-end">
    85. 

  85. 					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    86. 

  86. 					<view class="bg-grey padding-sm margin-xs radius">end</view>
    87. 

  87. 				</view>
    88. 

  88. 				<view class="flex solid-bottom padding align-center">
    89. 

  89. 					<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    90. 

  90. 					<view class="bg-grey padding-sm margin-xs radius">center</view>
    91. 

  91. 				</view>
    92. 

  92. 			</view>
    93. 

  93. 		</block>
    94. 

  94. 		<block v-if="TabCur==1">
    95. 

  95. 			<view class="cu-bar bg-white  margin-top solid-bottom">
    96. 

  96. 				<view class="action">
    97. 

  97. 					<text class="cuIcon-title text-blue"></text>等分列
    98. 

  98. 				</view>
    99. 

  99. 				<view class="action"></view>
    100. 

  100. 			</view>
    101. 

  101. 			<view class="bg-white padding">
    102. 

  102. 				<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
    103. 

  103. 					<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
    104. 

  104. 				</view>
    105. 

  105. 			</view>
    106. 

  106. 			<view class="cu-bar bg-white  margin-top solid-bottom">
    107. 

  107. 				<view class="action">
    108. 

  108. 					<text class="cuIcon-title text-blue"></text>等高
    109. 

  109. 				</view>
    110. 

  110. 				<view class="action"></view>
    111. 

  111. 			</view>
    112. 

  112. 			<view class="bg-white padding">
    113. 

  113. 				<view class="grid col-4 grid-square">
    114. 

  114. 					<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
    115. 

  115. 				</view>
    116. 

  116. 			</view>
    117. 

  117. 		</block>
    118. 

  118. 		<block v-if="TabCur==2">
    119. 

  119. 			<view class="cu-bar bg-white margin-top solid-bottom">
    120. 

  120. 				<view class="action">
    121. 

  121. 					<text class="cuIcon-title text-blue"></text>浮动
    122. 

  122. 				</view>
    123. 

  123. 			</view>
    124. 

  124. 			<view class="bg-white padding">
    125. 

  125. 				<view class=" cf padding-sm">
    126. 

  126. 					<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
    127. 

  127. 					<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
    128. 

  128. 				</view>
    129. 

  129. 			</view>
    130. 

  130. 			<view class="cu-bar bg-white  solid-bottom margin-top solid-bottom">
    131. 

  131. 				<view class="action">
    132. 

  132. 					<text class="cuIcon-title text-blue"></text>内外边距
    133. 

  133. 				</view>
    134. 

  134. 			</view>
    135. 

  135. 			<view class="bg-white">
    136. 

  136. 				<view class="padding bg-gray">{size}的尺寸有xs/sm/df/lg/xl</view>
    137. 

  137. 				<view class="flex flex-wrap padding solid-top">
    138. 

  138. 					<view class="basis-df padding-bottom-xs">外边距</view>
    139. 

  139. 					<view class="basis-df padding-bottom-xs">内边距</view>
    140. 

  140. 					<view class="basis-df">.margin-{size}</view>
    141. 

  141. 					<view class="basis-df">.padding-{size}</view>
    142. 

  142. 				</view>
    143. 

  143. 				<view class="flex flex-wrap padding solid-top">
    144. 

  144. 					<view class="basis-df padding-bottom-xs">水平方向外边距</view>
    145. 

  145. 					<view class="basis-df padding-bottom-xs">水平方向内边距</view>
    146. 

  146. 					<view class="basis-df">.margin-lr-{size}</view>
    147. 

  147. 					<view class="basis-df">.padding-lr-{size}</view>
    148. 

  148. 				</view>
    149. 

  149. 				<view class="flex flex-wrap padding solid-top">
    150. 

  150. 					<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
    151. 

  151. 					<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
    152. 

  152. 					<view class="basis-df">.margin-tb-{size}</view>
    153. 

  153. 					<view class="basis-df">.padding-tb-{size}</view>
    154. 

  154. 				</view>
    155. 

  155. 				<view class="flex flex-wrap padding solid-top">
    156. 

  156. 					<view class="basis-df padding-bottom-xs">上外边距</view>
    157. 

  157. 					<view class="basis-df padding-bottom-xs">上内边距</view>
    158. 

  158. 					<view class="basis-df">.margin-top-{size}</view>
    159. 

  159. 					<view class="basis-df">.padding-top-{size}</view>
    160. 

  160. 				</view>
    161. 

  161. 				<view class="flex flex-wrap padding solid-top">
    162. 

  162. 					<view class="basis-df padding-bottom-xs">右外边距</view>
    163. 

  163. 					<view class="basis-df padding-bottom-xs">右内边距</view>
    164. 

  164. 					<view class="basis-df">.margin-right-{size}</view>
    165. 

  165. 					<view class="basis-df">.padding-right-{size}</view>
    166. 

  166. 				</view>
    167. 

  167. 				<view class="flex flex-wrap padding solid-top">
    168. 

  168. 					<view class="basis-df padding-bottom-xs">下外边距</view>
    169. 

  169. 					<view class="basis-df padding-bottom-xs">下内边距</view>
    170. 

  170. 					<view class="basis-df">margin-bottom-{size}</view>
    171. 

  171. 					<view class="basis-df">.padding-bottom-{size}</view>
    172. 

  172. 				</view>
    173. 

  173. 				<view class="flex flex-wrap padding solid-top">
    174. 

  174. 					<view class="basis-df padding-bottom-xs">左外边距</view>
    175. 

  175. 					<view class="basis-df padding-bottom-xs">左内边距</view>
    176. 

  176. 					<view class="basis-df">.margin-left-{size}</view>
    177. 

  177. 					<view class="basis-df">.padding-left-{size}</view>
    178. 

  178. 				</view>
    179. 

  179. 			</view>
    180. 

  180. 		</block>
    181. 

  181. 	</view>
    182. 

  182. </template>
    183. 

  183. 

  184. <script>
    185. 

  185. 	export default {
    186. 

  186. 		data() {
    187. 

  187. 			return {
    188. 

  188. 				CustomBar: this.CustomBar,
    189. 

  189. 				TabCur: 0,
    190. 

  190. 				avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
    191. 

  191. 				tabNav: ['Flex布局', 'Grid布局', '辅助布局']
    192. 

  192. 			};
    193. 

  193. 		},
    194. 

  194. 		methods: {
    195. 

  195. 			tabSelect(e) {
    196. 

  196. 				this.TabCur = e.currentTarget.dataset.id;
    197. 

  197. 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    198. 

  198. 			}
    199. 

  199. 		}
    200. 

  200. 	}
    201. 

  201. </script>
    202. 

  202. 

  203. <style>
    204. 

  204. 	page {
    205. 

  205. 		padding-top: 45px;
    206. 

  206. 	}
    207. 

  207. </style>
    208.