zhanghuiqing
/
official_revision
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
方诺官网改正版
9 Commitit
2 Branchit
27 MiB
 
 
 
Puu: 61ddf909cb
official_revision/src/views/UpdateProfile.vue

392 rivejä
15 KiB
Raaka Blame Historia 

  1. <template>

  2.   <div>

  3.     <div class="intro-y flex items-center mt-8">

  4.       <h2 class="text-lg font-medium mr-auto">Update Profile</h2>

  5.     </div>

  6.     <div class="grid grid-cols-12 gap-6">

  7.       <!-- BEGIN: Profile Menu -->

  8.       <div

  9.         class="col-span-12 lg:col-span-4 xxl:col-span-3 flex lg:block flex-col-reverse"

  10.       >

  11.         <div class="intro-y box mt-5">

  12.           <div class="relative flex items-center p-5">

  13.             <div class="w-12 h-12 image-fit">

  14.               <img

  15.                 alt=""

  16.                 class="rounded-full"

  17.                 :src="require(`@/assets/images/${$f()[0].photos[0]}`)"

  18.               />

  19.             </div>

  20.             <div class="ml-4 mr-auto">

  21.               <div class="font-medium text-base">

  22.                 {{ $f()[0].users[0].name }}

  23.               </div>

  24.               <div class="text-gray-600">{{ $f()[0].jobs[0] }}</div>

  25.             </div>

  26.             <div class="dropdown">

  27.               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">

  28.                 <MoreHorizontalIcon

  29.                   class="w-5 h-5 text-gray-700 dark:text-gray-300"

  30.                 />

  31.               </a>

  32.               <div class="dropdown-box w-56">

  33.                 <div class="dropdown-box__content box dark:bg-dark-1">

  34.                   <div

  35.                     class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"

  36.                   >

  37.                     Export Options

  38.                   </div>

  39.                   <div class="p-2">

  40.                     <a

  41.                       href=""

  42.                       class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  43.                     >

  44.                       <ActivityIcon

  45.                         class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"

  46.                       />

  47.                       English

  48.                     </a>

  49.                     <a

  50.                       href=""

  51.                       class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  52.                     >

  53.                       <BoxIcon

  54.                         class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"

  55.                       />

  56.                       Indonesia

  57.                       <div

  58.                         class="text-xs text-white px-1 rounded-full bg-theme-6 ml-auto"

  59.                       >

  60.                         10

  61.                       </div>

  62.                     </a>

  63.                     <a

  64.                       href=""

  65.                       class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  66.                     >

  67.                       <LayoutIcon

  68.                         class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"

  69.                       />

  70.                       English

  71.                     </a>

  72.                     <a

  73.                       href=""

  74.                       class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  75.                     >

  76.                       <SidebarIcon

  77.                         class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"

  78.                       />

  79.                       Indonesia

  80.                     </a>

  81.                   </div>

  82.                   <div

  83.                     class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"

  84.                   >

  85.                     <button

  86.                       type="button"

  87.                       class="button button--sm bg-theme-1 text-white"

  88.                     >

  89.                       Settings

  90.                     </button>

  91.                     <button

  92.                       type="button"

  93.                       class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"

  94.                     >

  95.                       View Profile

  96.                     </button>

  97.                   </div>

  98.                 </div>

  99.               </div>

  100.             </div>

  101.           </div>

  102.           <div class="p-5 border-t border-gray-200 dark:border-dark-5">

  103.             <a

  104.               class="flex items-center text-theme-1 dark:text-theme-10 font-medium"

  105.               href=""

  106.             >

  107.               <ActivityIcon class="w-4 h-4 mr-2" /> Personal Information

  108.             </a>

  109.             <a class="flex items-center mt-5" href="">

  110.               <BoxIcon class="w-4 h-4 mr-2" /> Account Settings

  111.             </a>

  112.             <a class="flex items-center mt-5" href="">

  113.               <LockIcon class="w-4 h-4 mr-2" /> Change Password

  114.             </a>

  115.             <a class="flex items-center mt-5" href="">

  116.               <SettingsIcon class="w-4 h-4 mr-2" /> User Settings

  117.             </a>

  118.           </div>

  119.           <div class="p-5 border-t border-gray-200 dark:border-dark-5">

  120.             <a class="flex items-center" href="">

  121.               <ActivityIcon class="w-4 h-4 mr-2" /> Email Settings

  122.             </a>

  123.             <a class="flex items-center mt-5" href="">

  124.               <BoxIcon class="w-4 h-4 mr-2" /> Saved Credit Cards

  125.             </a>

  126.             <a class="flex items-center mt-5" href="">

  127.               <LockIcon class="w-4 h-4 mr-2" /> Social Networks

  128.             </a>

  129.             <a class="flex items-center mt-5" href="">

  130.               <SettingsIcon class="w-4 h-4 mr-2" /> Tax Information

  131.             </a>

  132.           </div>

  133.           <div class="p-5 border-t flex dark:border-dark-5">

  134.             <button

  135.               type="button"

  136.               class="button button--sm block bg-theme-1 text-white"

  137.             >

  138.               New Group

  139.             </button>

  140.             <button

  141.               type="button"

  142.               class="button button--sm border text-gray-700 dark:border-dark-5 dark:bg-dark-5 dark:text-gray-300 ml-auto"

  143.             >

  144.               New Quick Link

  145.             </button>

  146.           </div>

  147.         </div>

  148.       </div>

  149.       <!-- END: Profile Menu -->

  150.       <div class="col-span-12 lg:col-span-8 xxl:col-span-9">

  151.         <!-- BEGIN: Display Information -->

  152.         <div class="intro-y box lg:mt-5">

  153.           <div

  154.             class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"

  155.           >

  156.             <h2 class="font-medium text-base mr-auto">Display Information</h2>

  157.           </div>

  158.           <div class="p-5">

  159.             <div class="grid grid-cols-12 gap-5">

  160.               <div class="col-span-12 xl:col-span-4">

  161.                 <div

  162.                   class="border border-gray-200 dark:border-dark-5 rounded-md p-5"

  163.                 >

  164.                   <div

  165.                     class="w-40 h-40 relative image-fit cursor-pointer zoom-in mx-auto"

  166.                   >

  167.                     <img

  168.                       class="rounded-md"

  169.                       alt=""

  170.                       :src="require(`@/assets/images/${$f()[0].photos[0]}`)"

  171.                     />

  172.                     <Tippy

  173.                       tag="div"

  174.                       content="Remove this profile photo?"

  175.                       class="w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-theme-6 right-0 top-0 -mr-2 -mt-2"

  176.                     >

  177.                       <xIcon class="w-4 h-4" />

  178.                     </Tippy>

  179.                   </div>

  180.                   <div class="w-40 mx-auto cursor-pointer relative mt-5">

  181.                     <button

  182.                       type="button"

  183.                       class="button w-full bg-theme-1 text-white"

  184.                     >

  185.                       Change Photo

  186.                     </button>

  187.                     <input

  188.                       type="file"

  189.                       class="w-full h-full top-0 left-0 absolute opacity-0"

  190.                     />

  191.                   </div>

  192.                 </div>

  193.               </div>

  194.               <div class="col-span-12 xl:col-span-8">

  195.                 <div>

  196.                   <label>Display Name</label>

  197.                   <input

  198.                     type="text"

  199.                     class="input w-full border bg-gray-100 cursor-not-allowed mt-2"

  200.                     placeholder="Input text"

  201.                     :value="$f()[0].users[0].name"

  202.                     disabled

  203.                   />

  204.                 </div>

  205.                 <div class="mt-3">

  206.                   <label>Nearest MRT Station</label>

  207.                   <div class="mt-2">

  208.                     <TailSelect

  209.                       v-model="select"

  210.                       :options="{

  211.                         search: true,

  212.                         classNames: 'w-full'

  213.                       }"

  214.                     >

  215.                       <option value="1">Admiralty</option>

  216.                       <option value="2">Aljunied</option>

  217.                       <option value="3">Ang Mo Kio</option>

  218.                       <option value="4">Bartley</option>

  219.                       <option value="5">Beauty World</option>

  220.                     </TailSelect>

  221.                   </div>

  222.                 </div>

  223.                 <div class="mt-3">

  224.                   <label>Postal Code</label>

  225.                   <div class="mt-2">

  226.                     <TailSelect

  227.                       v-model="select"

  228.                       :options="{

  229.                         search: true,

  230.                         classNames: 'w-full'

  231.                       }"

  232.                     >

  233.                       <option value="1"

  234.                         >018906 - 1 STRAITS BOULEVARD SINGA...</option

  235.                       >

  236.                       <option value="2"

  237.                         >018910 - 5A MARINA GARDENS DRIVE...</option

  238.                       >

  239.                       <option value="3"

  240.                         >018915 - 100A CENTRAL BOULEVARD...</option

  241.                       >

  242.                       <option value="4"

  243.                         >018925 - 21 PARK STREET MARINA...</option

  244.                       >

  245.                       <option value="5"

  246.                         >018926 - 23 PARK STREET MARINA...</option

  247.                       >

  248.                     </TailSelect>

  249.                   </div>

  250.                 </div>

  251.                 <div class="mt-3">

  252.                   <label>Address</label>

  253.                   <textarea

  254.                     class="input w-full border mt-2"

  255.                     placeholder="Adress"

  256.                   >

  257. 10 Anson Road, International Plaza, #10-11, 079903 Singapore, Singapore</textarea

  258.                   >

  259.                 </div>

  260.                 <button

  261.                   type="button"

  262.                   class="button w-20 bg-theme-1 text-white mt-3"

  263.                 >

  264.                   Save

  265.                 </button>

  266.               </div>

  267.             </div>

  268.           </div>

  269.         </div>

  270.         <!-- END: Display Information -->

  271.         <!-- BEGIN: Personal Information -->

  272.         <div class="intro-y box lg:mt-5">

  273.           <div

  274.             class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"

  275.           >

  276.             <h2 class="font-medium text-base mr-auto">Personal Information</h2>

  277.           </div>

  278.           <div class="p-5">

  279.             <div class="grid grid-cols-12 gap-5">

  280.               <div class="col-span-12 xl:col-span-6">

  281.                 <div>

  282.                   <label>Email</label>

  283.                   <input

  284.                     type="text"

  285.                     class="input w-full border bg-gray-100 cursor-not-allowed mt-2"

  286.                     placeholder="Input text"

  287.                     :value="$f()[0].users[0].email"

  288.                     disabled

  289.                   />

  290.                 </div>

  291.                 <div class="mt-3">

  292.                   <label>Name</label>

  293.                   <input

  294.                     type="text"

  295.                     class="input w-full border mt-2"

  296.                     placeholder="Input text"

  297.                     :value="$f()[0].users[0].name"

  298.                     disabled

  299.                   />

  300.                 </div>

  301.                 <div class="mt-3">

  302.                   <label>ID Type</label>

  303.                   <select class="input w-full border mt-2">

  304.                     <option>IC</option>

  305.                     <option>FIN</option>

  306.                     <option>Passport</option>

  307.                   </select>

  308.                 </div>

  309.                 <div class="mt-3">

  310.                   <label>ID Number</label>

  311.                   <input

  312.                     type="text"

  313.                     class="input w-full border mt-2"

  314.                     placeholder="Input text"

  315.                     value="357821204950001"

  316.                   />

  317.                 </div>

  318.               </div>

  319.               <div class="col-span-12 xl:col-span-6">

  320.                 <div>

  321.                   <label>Phone Number</label>

  322.                   <input

  323.                     type="text"

  324.                     class="input w-full border mt-2"

  325.                     placeholder="Input text"

  326.                     value="65570828"

  327.                   />

  328.                 </div>

  329.                 <div class="mt-3">

  330.                   <label>Address</label>

  331.                   <input

  332.                     type="text"

  333.                     class="input w-full border mt-2"

  334.                     placeholder="Input text"

  335.                     value="10 Anson Road, International Plaza, #10-11, 079903 Singapore, Singapore"

  336.                   />

  337.                 </div>

  338.                 <div class="mt-3">

  339.                   <label>Bank Name</label>

  340.                   <div class="mt-2">

  341.                     <TailSelect

  342.                       v-model="select"

  343.                       :options="{

  344.                         search: true,

  345.                         classNames: 'w-full'

  346.                       }"

  347.                     >

  348.                       <option value="1">SBI - STATE BANK OF INDIA</option>

  349.                       <option value="1">CITI BANK - CITI BANK</option>

  350.                     </TailSelect>

  351.                   </div>

  352.                 </div>

  353.                 <div class="mt-3">

  354.                   <label>Bank Account</label>

  355.                   <input

  356.                     type="text"

  357.                     class="input w-full border mt-2"

  358.                     placeholder="Input text"

  359.                     value="DBS Current 011-903573-0"

  360.                   />

  361.                 </div>

  362.               </div>

  363.             </div>

  364.             <div class="flex justify-end mt-4">

  365.               <a href="" class="text-theme-6 flex items-center">

  366.                 <Trash2Icon class="w-4 h-4 mr-1" /> Delete Account

  367.               </a>

  368.               <button

  369.                 type="button"

  370.                 class="button w-20 bg-theme-1 text-white ml-auto"

  371.               >

  372.                 Save

  373.               </button>

  374.             </div>

  375.           </div>

  376.         </div>

  377.         <!-- END: Personal Information -->

  378.       </div>

  379.     </div>

  380.   </div>

  381. </template>

  382. 

  383. <script>

  384. export default {

  385.   data() {

  386.     return {

  387.       select: "1"

  388.     };

  389.   }

  390. };

  391. </script>