index.wxss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. Page {
  2. width: 100%;
  3. height: 100%;
  4. background-color: #F7F7F7;
  5. }
  6. /* 垂直方向布局,水平居中 **/
  7. .flex-column{
  8. display: flex;
  9. flex-flow: column nowrap;
  10. align-items: center;
  11. justify-content: left;
  12. }
  13. /* 水平方向布局,垂直居中 **/
  14. .flex-row{
  15. display: flex;
  16. flex-flow: row nowrap;
  17. align-items: center;
  18. justify-content: center;
  19. }
  20. .container {
  21. width: 100%;
  22. background-color: #F7F7F7;
  23. display: flex;
  24. flex-flow: column nowrap;
  25. justify-content: space-between;
  26. }
  27. .top {
  28. height: 538rpx;
  29. width: 100%;
  30. }
  31. .top_img {
  32. height: 269px;
  33. width: 100%;
  34. }
  35. .bottom {
  36. /* height: 1000rpx; */
  37. padding: 30rpx 20rpx;
  38. display: flex;
  39. flex-flow: row nowrap;
  40. justify-content: space-between;
  41. }
  42. .left {
  43. width: 345rpx;
  44. }
  45. .left_1,
  46. .left_3,
  47. .right_2,
  48. .right_4 {
  49. height: 120rpx;
  50. background-color: #DBA901;
  51. color: #fff;
  52. border-radius: 10rpx;
  53. border: 4rpx solid #000;
  54. display: flex;
  55. flex-flow: row nowrap;
  56. justify-content: center;
  57. align-items: center;
  58. margin-bottom: 20rpx;
  59. }
  60. .left_2,
  61. .left_4,
  62. .right_1,
  63. .right_3 {
  64. height: 240rpx;
  65. background-color: #1296db;
  66. color: #fff;
  67. border-radius: 10rpx;
  68. border: 4rpx solid #000;
  69. display: flex;
  70. flex-flow: row nowrap;
  71. justify-content: center;
  72. align-items: center;
  73. margin-bottom: 20rpx;
  74. }
  75. .right {
  76. width: 345rpx;
  77. margin-left: 20rpx;
  78. }
  79. .content-button {
  80. height: 300rpx;
  81. width: 690rpx;
  82. margin-left: 30rpx;
  83. display: flex;
  84. flex-flow: row wrap;
  85. justify-content: left;
  86. background: #FFFFFF;
  87. box-shadow: 0px 9px 9px 1px rgba(131, 131, 131, 0.16);
  88. border-radius: 10px;
  89. margin-top: 5px;
  90. }
  91. .content-view {
  92. height: 50%;
  93. width: 50%;
  94. display: flex;
  95. flex-flow: row nowrap;
  96. justify-content: space-evenly;
  97. align-items: center;
  98. }
  99. .content-view image {
  100. width: 50rpx;
  101. height: 50rpx;
  102. }
  103. .content-view-title {
  104. font-size: 28rpx;
  105. font-weight: 800;
  106. color: #070604;
  107. margin-bottom: 9px;
  108. }
  109. .content-view-english {
  110. font-size: 18rpx;
  111. font-weight: 800;
  112. color: #BE9962;
  113. }
  114. /* .profile {
  115. box-sizing: border-box;
  116. border-bottom: solid 1rpx rgba(229, 212, 174, 0.5);
  117. border-right: solid 1rpx rgba(229, 212, 174, 0.5);
  118. }
  119. .environment {
  120. box-sizing: border-box;
  121. border-bottom: solid 1rpx rgba(229, 212, 174, 0.5);
  122. border-left: solid 1rpx rgba(229, 212, 174, 0.5);
  123. } */
  124. /* .culture {
  125. box-sizing: border-box;
  126. border-top: solid 1rpx rgba(229, 212, 174, 0.5);
  127. border-right: solid 1rpx rgba(229, 212, 174, 0.5);
  128. } */
  129. /* .benefits {
  130. box-sizing: border-box;
  131. border-top: solid 1rpx rgba(229, 212, 174, 0.5);
  132. border-left: solid 1rpx rgba(229, 212, 174, 0.5);
  133. } */
  134. .person-button {
  135. width: 344px;
  136. height: 88px;
  137. background: #FFFFFF;
  138. border-radius: 10px;
  139. margin: 0 auto;
  140. margin-top: -8px;
  141. display: flex;
  142. flex-flow: row nowrap;
  143. justify-content: space-evenly;
  144. align-items: center;
  145. position: relative;
  146. box-shadow: 4px 4px 20px 0px rgba(90,90,90,0.3);
  147. }
  148. .head-img {
  149. width: 55px;
  150. height: 55px;
  151. border-radius: 50%;
  152. }
  153. .welcome {
  154. width: 105px;
  155. height: 55px;
  156. }
  157. .person-center {
  158. width: 88px;
  159. height: 28px;
  160. border-radius: 10px
  161. }
  162. .person-center-text{
  163. width: 84px;
  164. height: 27px;
  165. border-radius: 5px;
  166. background-color: #333333;
  167. justify-content: center;
  168. }
  169. .text-style{
  170. font-size: 14px;
  171. color: #FFFFFFFF;
  172. }
  173. .school-view {
  174. width: 347px;
  175. height: 147px;
  176. margin: 20px auto;
  177. /* margin-bottom: 60px; */
  178. /* box-shadow: 0px 9px 9px 1px rgba(131, 131, 131, 0.16); */
  179. }
  180. .school-img {
  181. width: 347px;
  182. height: 147px;
  183. position: absolute;
  184. }
  185. .school-view-right {
  186. position: relative;
  187. left: 165px;
  188. height: 147px;
  189. width: 183px;
  190. }
  191. .school-position {
  192. width: 60px;
  193. height: 60px;
  194. }
  195. .school-trip {
  196. width: 60px;
  197. height: 60px;
  198. }
  199. .content-all{
  200. display: flex;
  201. flex-flow: column nowrap;
  202. align-items: center;
  203. }
  204. .content-top{
  205. width: 345px;
  206. height: 146px;
  207. background: #FFFFFF;
  208. border-radius: 10px;
  209. margin-top: 8px;
  210. display: flex;
  211. flex-flow: row nowrap;
  212. justify-content: space-between;
  213. align-items: center;
  214. }
  215. .content-top-v{
  216. width: 80px;
  217. height: 90px;
  218. display: flex;
  219. flex-flow: column nowrap;
  220. justify-content: space-around;
  221. align-items: center;
  222. }
  223. .top-line{
  224. width: 1px;
  225. height: 82px;
  226. background: #909090;
  227. }
  228. .ontent-top-text{
  229. font-size: 10px;
  230. font-weight: 400;
  231. color: #3E3A39;
  232. }
  233. .content-bottom{
  234. margin-top: 14px;
  235. display: flex;
  236. flex-flow: row nowrap;
  237. justify-content: center;
  238. align-items: center;
  239. background-color: #FFFFFFFF;
  240. border-radius: 10px;
  241. box-shadow: 2px 2px 10px 0px rgba(90,90,90,0.3);
  242. margin-bottom: 14px;
  243. }
  244. .info-style{
  245. width: 172px;
  246. height: 292px;
  247. }
  248. .content-bottom-left{
  249. width: 119px;
  250. height: 180px;
  251. }
  252. .content-bottom-right{
  253. width: 217px;
  254. height: 180px;
  255. margin-left: 8px;
  256. }
  257. .culture{
  258. width: 217px;
  259. height: 78px;
  260. }
  261. .content-bottom-right-bottom{
  262. width: 217px;
  263. height: 93px;
  264. margin-top: 5px;
  265. display: flex;
  266. flex-flow: row nowrap;
  267. justify-content: left;
  268. }
  269. .environment{
  270. width: 106px;
  271. height: 93px;
  272. }
  273. .treatment{
  274. width: 106px;
  275. height: 93px;
  276. margin-left: 6px;
  277. }
  278. .content-bottom-style{
  279. width: 172px;
  280. height: 144px;
  281. }
  282. .content-lower{
  283. width: 374px;
  284. height: 131px;
  285. margin-bottom: 14px;
  286. }
  287. .lower-style{
  288. width: 346px;
  289. height: 131px;
  290. box-shadow: 4px 4px 20px 0px rgba(90,90,90,0.3);
  291. }
  292. .school-style{
  293. width: 173px;
  294. height: 131px;
  295. }