zhanghuiqing
/
official_revision
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
方诺官网改正版
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
9 Commits
2 Branches
27 MiB
 
 
 
Tree: 61ddf909cb
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '61ddf909cb'
${ noResults }
official_revision/src/views/ProfileOverview1.vue

606 lines
24 KiB
Raw Blame History 

  1. <template>

  2.   <div>

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

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

  5.     </div>

  6.     <!-- BEGIN: Profile Info -->

  7.     <div class="intro-y box px-5 pt-5 mt-5">

  8.       <div

  9.         class="flex flex-col lg:flex-row border-b border-gray-200 dark:border-dark-5 pb-5 -mx-5"

  10.       >

  11.         <div

  12.           class="flex flex-1 px-5 items-center justify-center lg:justify-start"

  13.         >

  14.           <div

  15.             class="w-20 h-20 sm:w-24 sm:h-24 flex-none lg:w-32 lg:h-32 image-fit relative"

  16.           >

  17.             <img

  18.               alt=""

  19.               class="rounded-full"

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

  21.             />

  22.             <div

  23.               class="absolute mb-1 mr-1 flex items-center justify-center bottom-0 right-0 bg-theme-1 rounded-full p-2"

  24.             >

  25.               <CameraIcon class="w-4 h-4 text-white" />

  26.             </div>

  27.           </div>

  28.           <div class="ml-5">

  29.             <div

  30.               class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg"

  31.             >

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

  33.             </div>

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

  35.           </div>

  36.         </div>

  37.         <div

  38.           class="flex mt-6 lg:mt-0 items-center lg:items-start flex-1 flex-col justify-center text-gray-600 dark:text-gray-300 px-5 border-l border-r border-gray-200 dark:border-dark-5 border-t lg:border-t-0 pt-5 lg:pt-0"

  39.         >

  40.           <div class="truncate sm:whitespace-normal flex items-center">

  41.             <MailIcon class="w-4 h-4 mr-2" />

  42.             {{ $f()[0].users[0].email }}

  43.           </div>

  44.           <div class="truncate sm:whitespace-normal flex items-center mt-3">

  45.             <InstagramIcon class="w-4 h-4 mr-2" /> Instagram

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

  47.           </div>

  48.           <div class="truncate sm:whitespace-normal flex items-center mt-3">

  49.             <TwitterIcon class="w-4 h-4 mr-2" /> Twitter

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

  51.           </div>

  52.         </div>

  53.         <div

  54.           class="mt-6 lg:mt-0 flex-1 px-5 border-t lg:border-0 border-gray-200 dark:border-dark-5 pt-5 lg:pt-0"

  55.         >

  56.           <div class="font-medium text-center lg:text-left lg:mt-5">

  57.             Sales Growth

  58.           </div>

  59.           <div class="flex items-center justify-center lg:justify-start mt-2">

  60.             <div class="mr-2 w-20 flex">

  61.               USP: <span class="ml-3 font-medium text-theme-9">+23%</span>

  62.             </div>

  63.             <div class="w-32 lg:w-40">

  64.               <canvas class="simple-line-chart-1" height="40"></canvas>

  65.             </div>

  66.           </div>

  67.           <div class="flex items-center justify-center lg:justify-start">

  68.             <div class="mr-2 w-20 flex">

  69.               STP: <span class="ml-3 font-medium text-theme-6">-2%</span>

  70.             </div>

  71.             <div class="w-32 lg:w-40">

  72.               <canvas class="simple-line-chart-2" height="40"></canvas>

  73.             </div>

  74.           </div>

  75.         </div>

  76.       </div>

  77.       <div

  78.         class="nav-tabs flex flex-col sm:flex-row justify-center lg:justify-start"

  79.       >

  80.         <a

  81.           data-toggle="tab"

  82.           data-target="#dashboard"

  83.           href="javascript:;"

  84.           class="py-4 sm:mr-8 active"

  85.           >Dashboard</a

  86.         >

  87.         <a

  88.           data-toggle="tab"

  89.           data-target="#account-and-profile"

  90.           href="javascript:;"

  91.           class="py-4 sm:mr-8"

  92.           >Account & Profile</a

  93.         >

  94.         <a

  95.           data-toggle="tab"

  96.           data-target="#activities"

  97.           href="javascript:;"

  98.           class="py-4 sm:mr-8"

  99.           >Activities</a

  100.         >

  101.         <a

  102.           data-toggle="tab"

  103.           data-target="#tasks"

  104.           href="javascript:;"

  105.           class="py-4 sm:mr-8"

  106.           >Tasks</a

  107.         >

  108.       </div>

  109.     </div>

  110.     <!-- END: Profile Info -->

  111.     <div class="intro-y tab-content mt-5">

  112.       <div id="dashboard" class="tab-content__pane active">

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

  114.           <!-- BEGIN: Top Categories -->

  115.           <div class="intro-y box col-span-12 lg:col-span-6">

  116.             <div

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

  118.             >

  119.               <h2 class="font-medium text-base mr-auto">Top Categories</h2>

  120.               <div class="dropdown ml-auto">

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

  122.                   <MoreHorizontalIcon

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

  124.                   />

  125.                 </a>

  126.                 <div class="dropdown-box w-40">

  127.                   <div class="dropdown-box__content box dark:bg-dark-1 p-2">

  128.                     <a

  129.                       href=""

  130.                       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"

  131.                     >

  132.                       <PlusIcon class="w-4 h-4 mr-2" /> Add Category

  133.                     </a>

  134.                     <a

  135.                       href=""

  136.                       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"

  137.                     >

  138.                       <SettingsIcon class="w-4 h-4 mr-2" />

  139.                       Settings

  140.                     </a>

  141.                   </div>

  142.                 </div>

  143.               </div>

  144.             </div>

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

  146.               <div class="flex flex-col sm:flex-row">

  147.                 <div class="mr-auto">

  148.                   <a href="" class="font-medium">Wordpress Template</a>

  149.                   <div class="text-gray-600 mt-1">HTML, PHP, Mysql</div>

  150.                 </div>

  151.                 <div class="flex">

  152.                   <div class="w-32 -ml-2 sm:ml-0 mt-5 mr-auto sm:mr-5">

  153.                     <canvas

  154.                       class="simple-line-chart-1"

  155.                       data-random="true"

  156.                       height="20"

  157.                     ></canvas>

  158.                   </div>

  159.                   <div class="text-center">

  160.                     <div class="font-medium">6.5k</div>

  161.                     <div class="bg-theme-18 text-theme-9 rounded px-2 mt-1">

  162.                       +150

  163.                     </div>

  164.                   </div>

  165.                 </div>

  166.               </div>

  167.               <div class="flex flex-col sm:flex-row mt-5">

  168.                 <div class="mr-auto">

  169.                   <a href="" class="font-medium">Bootstrap HTML Template</a>

  170.                   <div class="text-gray-600 mt-1">HTML, PHP, Mysql</div>

  171.                 </div>

  172.                 <div class="flex">

  173.                   <div class="w-32 -ml-2 sm:ml-0 mt-5 mr-auto sm:mr-5">

  174.                     <canvas

  175.                       class="simple-line-chart-1"

  176.                       data-random="true"

  177.                       height="20"

  178.                     ></canvas>

  179.                   </div>

  180.                   <div class="text-center">

  181.                     <div class="font-medium">2.5k</div>

  182.                     <div class="bg-theme-17 text-theme-11 rounded px-2 mt-1">

  183.                       +150

  184.                     </div>

  185.                   </div>

  186.                 </div>

  187.               </div>

  188.               <div class="flex flex-col sm:flex-row mt-5">

  189.                 <div class="mr-auto">

  190.                   <a href="" class="font-medium">Tailwind HTML Template</a>

  191.                   <div class="text-gray-600 mt-1">HTML, PHP, Mysql</div>

  192.                 </div>

  193.                 <div class="flex">

  194.                   <div class="w-32 -ml-2 sm:ml-0 mt-5 mr-auto sm:mr-5">

  195.                     <canvas

  196.                       class="simple-line-chart-1"

  197.                       data-random="true"

  198.                       height="20"

  199.                     ></canvas>

  200.                   </div>

  201.                   <div class="text-center">

  202.                     <div class="font-medium">3.4k</div>

  203.                     <div class="bg-theme-14 text-theme-10 rounded px-2 mt-1">

  204.                       +150

  205.                     </div>

  206.                   </div>

  207.                 </div>

  208.               </div>

  209.             </div>

  210.           </div>

  211.           <!-- END: Top Categories -->

  212.           <!-- BEGIN: Work In Progress -->

  213.           <div class="intro-y box col-span-12 lg:col-span-6">

  214.             <div

  215.               class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"

  216.             >

  217.               <h2 class="font-medium text-base mr-auto">Work In Progress</h2>

  218.               <div class="dropdown ml-auto sm:hidden">

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

  220.                   <MoreHorizontalIcon

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

  222.                   />

  223.                 </a>

  224.                 <div class="nav-tabs dropdown-box w-40">

  225.                   <div class="dropdown-box__content box dark:bg-dark-1 p-2">

  226.                     <a

  227.                       href="javascript:;"

  228.                       data-toggle="tab"

  229.                       data-target="#new"

  230.                       class="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"

  231.                       >New</a

  232.                     >

  233.                     <a

  234.                       href="javascript:;"

  235.                       data-toggle="tab"

  236.                       data-target="#last-week"

  237.                       class="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"

  238.                       >Last Week</a

  239.                     >

  240.                   </div>

  241.                 </div>

  242.               </div>

  243.               <div class="nav-tabs ml-auto hidden sm:flex">

  244.                 <a

  245.                   data-toggle="tab"

  246.                   data-target="#work-in-progress-new"

  247.                   href="javascript:;"

  248.                   class="py-5 ml-6 active"

  249.                   >New</a

  250.                 >

  251.                 <a

  252.                   data-toggle="tab"

  253.                   data-target="#work-in-progress-last-week"

  254.                   href="javascript:;"

  255.                   class="py-5 ml-6"

  256.                   >Last Week</a

  257.                 >

  258.               </div>

  259.             </div>

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

  261.               <div class="tab-content">

  262.                 <div id="work-in-progress-new" class="tab-content__pane active">

  263.                   <div>

  264.                     <div class="flex">

  265.                       <div class="text-gray-700 dark:text-gray-300 mr-auto">

  266.                         Pending Tasks

  267.                       </div>

  268.                       <div class="font-medium">20%</div>

  269.                     </div>

  270.                     <div

  271.                       class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"

  272.                     >

  273.                       <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>

  274.                     </div>

  275.                   </div>

  276.                   <div class="mt-5">

  277.                     <div class="flex">

  278.                       <div class="text-gray-700 dark:text-gray-300 mr-auto">

  279.                         Completed Tasks

  280.                       </div>

  281.                       <div class="font-medium">

  282.                         2 / <span class="text-gray-600">20</span>

  283.                       </div>

  284.                     </div>

  285.                     <div

  286.                       class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"

  287.                     >

  288.                       <div class="w-1/4 h-full bg-theme-1 rounded-full"></div>

  289.                     </div>

  290.                   </div>

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

  292.                     <div class="flex">

  293.                       <div class="text-gray-700 dark:text-gray-300 mr-auto">

  294.                         Tasks In Progress

  295.                       </div>

  296.                       <div class="font-medium">42</div>

  297.                     </div>

  298.                     <div

  299.                       class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"

  300.                     >

  301.                       <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>

  302.                     </div>

  303.                   </div>

  304.                   <a

  305.                     href=""

  306.                     class="button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5"

  307.                     >View More Details</a

  308.                   >

  309.                 </div>

  310.               </div>

  311.             </div>

  312.           </div>

  313.           <!-- END: Work In Progress -->

  314.           <!-- BEGIN: Daily Sales -->

  315.           <div class="intro-y box col-span-12 lg:col-span-6">

  316.             <div

  317.               class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"

  318.             >

  319.               <h2 class="font-medium text-base mr-auto">Daily Sales</h2>

  320.               <div class="dropdown ml-auto sm:hidden">

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

  322.                   <MoreHorizontalIcon

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

  324.                   />

  325.                 </a>

  326.                 <div class="dropdown-box w-40">

  327.                   <div class="dropdown-box__content box dark:bg-dark-1 p-2">

  328.                     <a

  329.                       href="javascript:;"

  330.                       class="flex items-center 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"

  331.                     >

  332.                       <FileIcon class="w-4 h-4 mr-2" /> Download Excel

  333.                     </a>

  334.                   </div>

  335.                 </div>

  336.               </div>

  337.               <button

  338.                 class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"

  339.               >

  340.                 <FileIcon class="w-4 h-4 mr-2" /> Download Excel

  341.               </button>

  342.             </div>

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

  344.               <div class="relative flex items-center">

  345.                 <div class="w-12 h-12 flex-none image-fit">

  346.                   <img

  347.                     alt=""

  348.                     class="rounded-full"

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

  350.                   />

  351.                 </div>

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

  353.                   <a href="" class="font-medium">{{ $f()[0].users[0].name }}</a>

  354.                   <div class="text-gray-600 mr-5 sm:mr-5">

  355.                     Bootstrap 4 HTML Admin Template

  356.                   </div>

  357.                 </div>

  358.                 <div class="font-medium text-gray-700 dark:text-gray-600">

  359.                   +$19

  360.                 </div>

  361.               </div>

  362.               <div class="relative flex items-center mt-5">

  363.                 <div class="w-12 h-12 flex-none image-fit">

  364.                   <img

  365.                     alt=""

  366.                     class="rounded-full"

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

  368.                   />

  369.                 </div>

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

  371.                   <a href="" class="font-medium">{{ $f()[1].users[0].name }}</a>

  372.                   <div class="text-gray-600 mr-5 sm:mr-5">

  373.                     Tailwind HTML Admin Template

  374.                   </div>

  375.                 </div>

  376.                 <div class="font-medium text-gray-700 dark:text-gray-600">

  377.                   +$25

  378.                 </div>

  379.               </div>

  380.               <div class="relative flex items-center mt-5">

  381.                 <div class="w-12 h-12 flex-none image-fit">

  382.                   <img

  383.                     alt=""

  384.                     class="rounded-full"

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

  386.                   />

  387.                 </div>

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

  389.                   <a href="" class="font-medium">{{ $f()[2].users[0].name }}</a>

  390.                   <div class="text-gray-600 mr-5 sm:mr-5">

  391.                     Vuejs HTML Admin Template

  392.                   </div>

  393.                 </div>

  394.                 <div class="font-medium text-gray-700 dark:text-gray-600">

  395.                   +$21

  396.                 </div>

  397.               </div>

  398.             </div>

  399.           </div>

  400.           <!-- END: Daily Sales -->

  401.           <!-- BEGIN: Latest Tasks -->

  402.           <div class="intro-y box col-span-12 lg:col-span-6">

  403.             <div

  404.               class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"

  405.             >

  406.               <h2 class="font-medium text-base mr-auto">Latest Tasks</h2>

  407.               <div class="dropdown ml-auto sm:hidden">

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

  409.                   <MoreHorizontalIcon

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

  411.                   />

  412.                 </a>

  413.                 <div class="nav-tabs dropdown-box w-40">

  414.                   <div class="dropdown-box__content box dark:bg-dark-1 p-2">

  415.                     <a

  416.                       href="javascript:;"

  417.                       data-toggle="tab"

  418.                       data-target="#new"

  419.                       class="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"

  420.                       >New</a

  421.                     >

  422.                     <a

  423.                       href="javascript:;"

  424.                       data-toggle="tab"

  425.                       data-target="#last-week"

  426.                       class="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"

  427.                       >Last Week</a

  428.                     >

  429.                   </div>

  430.                 </div>

  431.               </div>

  432.               <div class="nav-tabs ml-auto hidden sm:flex">

  433.                 <a

  434.                   data-toggle="tab"

  435.                   data-target="#latest-tasks-new"

  436.                   href="javascript:;"

  437.                   class="py-5 ml-6 active"

  438.                   >New</a

  439.                 >

  440.                 <a

  441.                   data-toggle="tab"

  442.                   data-target="#latest-tasks-last-week"

  443.                   href="javascript:;"

  444.                   class="py-5 ml-6"

  445.                   >Last Week</a

  446.                 >

  447.               </div>

  448.             </div>

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

  450.               <div class="tab-content">

  451.                 <div id="latest-tasks-new" class="tab-content__pane active">

  452.                   <div class="flex items-center">

  453.                     <div

  454.                       class="border-l-2 border-theme-1 dark:border-theme-1 pl-4"

  455.                     >

  456.                       <a href="" class="font-medium">Create New Campaign</a>

  457.                       <div class="text-gray-600">10:00 AM</div>

  458.                     </div>

  459.                     <input

  460.                       class="input input--switch ml-auto border"

  461.                       type="checkbox"

  462.                     />

  463.                   </div>

  464.                   <div class="flex items-center mt-5">

  465.                     <div

  466.                       class="border-l-2 border-theme-1 dark:border-theme-1 pl-4"

  467.                     >

  468.                       <a href="" class="font-medium">Meeting With Client</a>

  469.                       <div class="text-gray-600">02:00 PM</div>

  470.                     </div>

  471.                     <input

  472.                       class="input input--switch ml-auto border"

  473.                       type="checkbox"

  474.                     />

  475.                   </div>

  476.                   <div class="flex items-center mt-5">

  477.                     <div

  478.                       class="border-l-2 border-theme-1 dark:border-theme-1 pl-4"

  479.                     >

  480.                       <a href="" class="font-medium">Create New Repository</a>

  481.                       <div class="text-gray-600">04:00 PM</div>

  482.                     </div>

  483.                     <input

  484.                       class="input input--switch ml-auto border"

  485.                       type="checkbox"

  486.                     />

  487.                   </div>

  488.                 </div>

  489.               </div>

  490.             </div>

  491.           </div>

  492.           <!-- END: Latest Tasks -->

  493.           <!-- BEGIN: General Statistic -->

  494.           <div class="intro-y box col-span-12">

  495.             <div

  496.               class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"

  497.             >

  498.               <h2 class="font-medium text-base mr-auto">General Statistics</h2>

  499.               <div class="dropdown ml-auto sm:hidden">

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

  501.                   <MoreHorizontalIcon

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

  503.                   />

  504.                 </a>

  505.                 <div class="dropdown-box w-40">

  506.                   <div class="dropdown-box__content box dark:bg-dark-1 p-2">

  507.                     <a

  508.                       href="javascript:;"

  509.                       class="flex items-center 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"

  510.                     >

  511.                       <FileIcon class="w-4 h-4 mr-2" /> Download XML

  512.                     </a>

  513.                   </div>

  514.                 </div>

  515.               </div>

  516.               <button

  517.                 class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"

  518.               >

  519.                 <FileIcon class="w-4 h-4 mr-2" /> Download XML

  520.               </button>

  521.             </div>

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

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

  524.                 <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">

  525.                   <div class="font-medium">Net Worth</div>

  526.                   <div class="flex items-center mt-1 sm:mt-0">

  527.                     <div class="mr-2 w-20 flex mr-auto">

  528.                       USP:

  529.                       <span class="ml-3 font-medium text-theme-9">+23%</span>

  530.                     </div>

  531.                     <div class="w-24 sm:w-32 lg:w-56">

  532.                       <SimpleLineChart1 :height="35" />

  533.                     </div>

  534.                   </div>

  535.                 </div>

  536.                 <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">

  537.                   <div class="font-medium">Sales</div>

  538.                   <div class="flex items-center mt-1 sm:mt-0">

  539.                     <div class="mr-2 w-20 flex mr-auto">

  540.                       USP:

  541.                       <span class="ml-3 font-medium text-theme-6">-5%</span>

  542.                     </div>

  543.                     <div class="w-24 sm:w-32 lg:w-56">

  544.                       <SimpleLineChart1 :height="35" />

  545.                     </div>

  546.                   </div>

  547.                 </div>

  548.                 <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">

  549.                   <div class="font-medium">Profit</div>

  550.                   <div class="flex items-center mt-1 sm:mt-0">

  551.                     <div class="mr-2 w-20 flex mr-auto">

  552.                       USP:

  553.                       <span class="ml-3 font-medium text-theme-6">-10%</span>

  554.                     </div>

  555.                     <div class="w-24 sm:w-32 lg:w-56">

  556.                       <SimpleLineChart1 :height="35" />

  557.                     </div>

  558.                   </div>

  559.                 </div>

  560.                 <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">

  561.                   <div class="font-medium">Products</div>

  562.                   <div class="flex items-center mt-1 sm:mt-0">

  563.                     <div class="mr-2 w-20 flex mr-auto">

  564.                       USP:

  565.                       <span class="ml-3 font-medium text-theme-9">+55%</span>

  566.                     </div>

  567.                     <div class="w-24 sm:w-32 lg:w-56">

  568.                       <SimpleLineChart1 :height="35" />

  569.                     </div>

  570.                   </div>

  571.                 </div>

  572.               </div>

  573.               <div class="flex mt-8">

  574.                 <div class="flex items-center mr-5">

  575.                   <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>

  576.                   <span>Author Sales</span>

  577.                 </div>

  578.                 <div class="flex items-center">

  579.                   <div class="w-2 h-2 bg-theme-1 rounded-full mr-3"></div>

  580.                   <span>Product Profit</span>

  581.                 </div>

  582.               </div>

  583.               <div class="report-chart mt-8">

  584.                 <ReportLineChart :height="450" />

  585.               </div>

  586.             </div>

  587.           </div>

  588.           <!-- END: General Statistic -->

  589.         </div>

  590.       </div>

  591.     </div>

  592.   </div>

  593. </template>

  594. 

  595. <script>

  596. import SimpleLineChart1 from "@/components/SimpleLineChart1";

  597. import ReportLineChart from "@/components/ReportLineChart";

  598. 

  599. export default {

  600.   components: {

  601.     SimpleLineChart1,

  602.     ReportLineChart

  603.   }

  604. };

  605. </script>